initial commit

Author: swanie21

.sass-cache/286e368dbccad0da773decc27214b7fd501e87b8/body.scssc

@@ -0,0 +1,63 @@
+# CSS Transitions & Transforms
+
+### CSS transitions can enrich user experiences by adding animations to elements by smoothly changing CSS values over a specified duration
+
+### CSS transforms change the shape and position of the content by rotation, skewing, scaling and translation in 2-d and 3-d space
+
+## Transition Examples:
+
+```
+button {
+  transition-duration: 0.3s;
+  transition-property: background;
+  transition-timing-function: ease;
+}
+```
+shorthand `transition: background 0.3s ease;`
+
+The `transition-timing-function` value allows the speed of the transition to change over time. There are 6 values for this property: `ease`, `linear`, `ease-in`, `ease-out`, `ease-in-out` and `cubic-bezier`. The `ease` value is the default value.
+
+Add a `transition-delay` property to delay the transition the moment the change of state is triggered
+
+```
+button {
+  transition-delay: 0.5
+  transition-duration: 0.3s;
+  transition-property: background;
+  transition-timing-function: ease;
+}
+```
+
+shorthand `transition: background 0.3s ease 0.5;`
+
+You might think that the transition property goes on the pseudo-class like the `:hover` state, but you might want the transition triggered on other states like `:focus`, so you should only declare the transition on the normal state.
+
+```
+button {
+  background: #2b5ea2;
+  transition-delay: 0.5
+  transition-duration: 0.3s;
+  transition-property: background;
+  transition-timing-function: ease;
+  &:hover, &:focus {
+    background: darken(#2b5ea2, 15%);
+  }
+}
+```
+
+You can chain multiple transition properties
+
+```
+button {
+  transition: background 0.5s ease, color 0.5s linear;
+}
+```
+
+shorthand `transition: all 0.5s ease;`
+(both the background and the color would be transitioned)
+
+By stating the `all` value you can target all the available properties so they all have the same duration and timing function on all the pseudo-class states (:hover, :focus, :active).
+
+Some other CSS properties that can be transitioned include `width`, `opacity`, `position` and `font-size`. Click [here](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties) for the complete list of properties that can be animated.
+
+## Transform Examples:

.sass-cache/286e368dbccad0da773decc27214b7fd501e87b8/buttons.scssc

@@ -0,0 +1,15 @@
+* {
+  box-sizing: border-box;
+}
+
+section {
+  margin: auto;
+  width: 80%;
+}
+
+h1 {
+  font-family: 'Spicy Rice', serif;
+  font-size: 30px;
+  letter-spacing: 3px;
+  text-align: center;
+}

.sass-cache/286e368dbccad0da773decc27214b7fd501e87b8/main.scssc

@@ -0,0 +1,161 @@
+@import 'variables.scss';
+@import 'mixins.scss';
+
+button {
+  background: #ccc;
+  border: none;
+  border-radius: 5px;
+  box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.50);
+  color: #111;
+  font-family: 'Puritan', sans-serif;
+  font-size: 20px;
+  padding: 15px;
+  margin: 5px;
+}
+
+.button1 {
+  transition: background 0.3s ease;
+  &:hover, &:focus {
+    background: $button-background-color;
+    color: $button-hover-text;
+  }
+}
+
+.button2 {
+  transition: background 1s ease;
+  &:hover, &:focus {
+    background: $button-background-color;
+    color: $button-hover-text;
+  }
+}
+
+.button3 {
+  transition: background 0.3s ease 0.5s, color 0.3s ease 0.5s;
+  &:hover, &:focus {
+    background: $button-background-color;
+    color: $button-hover-text;
+  }
+}
+
+.button4 {
+  transition: background 0.5s ease, color 0.5s linear;
+  &:hover {
+    background: $button-background-color;
+    color: #fe29b5;
+  }
+}
+
+.button5 {
+  position: relative;
+  transform: translateZ(0);
+  transition: color 0.3s ease;
+  &:hover, &:focus, &:active {
+    color: $button-hover-text;
+    &:before {
+      transform: scaleX(1);
+    }
+  }
+}
+
+.button5:before {
+  @include position-absolute;
+  background: $button-background-color;
+  border-radius: 5px;
+  content: "";
+  transform: scaleX(0);
+  transform-origin: 0 50%;
+  transition: transform 0.3s ease-out;
+  z-index: -1;
+}
+
+.button6 {
+  position: relative;
+  transform: translateZ(0);
+  transition: color 0.3s ease;
+  &:hover, &:focus, &:active {
+    color: $button-hover-text;
+    &:before {
+      transform: scaleX(1);
+    }
+  }
+}
+
+.button6:before {
+  @include position-absolute;
+  background: $button-background-color;
+  border-radius: 5px;
+  content: "";
+  transform: scaleX(0);
+  transform-origin: 100% 50%;
+  transition: transform 0.3s ease-out;
+  z-index: -1;
+}
+
+.button7 {
+  position: relative;
+  transform: translateZ(0);
+  transition: color 0.3s ease;
+  &:hover, &:focus, &:active {
+    color: $button-hover-text;
+    &:before {
+      transform: scaleX(1);
+    }
+  }
+}
+
+.button7:before {
+  @include position-absolute;
+  background: $button-background-color;
+  border-radius: 5px;
+  content: "";
+  transform: scaleX(0);
+  transform-origin: 50% 0;
+  transition: transform 0.3s ease-out;
+  z-index: -1;
+}
+
+.button8 {
+  position: relative;
+  transform: translateZ(0);
+  transition: color 0.3s ease;
+  &:hover, &:focus, &:active {
+    color: $button-hover-text;
+    &:before {
+      transform: scaleY(1);
+    }
+  }
+}
+
+.button8:before {
+  @include position-absolute;
+  background: $button-background-color;
+  border-radius: 5px;
+  content: "";
+  transform: scaleY(0);
+  transform-origin: 100% 0;
+  transition: transform 0.3s ease-out;
+  z-index: -1;
+}
+
+.button9 {
+  position: relative;
+  transform: translateZ(0);
+  transition: color 0.3s ease;
+  &:hover, &:focus, &:active {
+    color: $button-hover-text;
+    &:before {
+      transform: scaleY(1);
+    }
+  }
+}
+
+.button9:before {
+  @include position-absolute;
+  background: $button-background-color;
+  border-radius: 5px;
+  content: "";
+  transform: scaleY(0);
+  transform-origin: 0 100%;
+  transition: transform 0.3s ease-out;
+  z-index: -1;
+}