Merges pull request geoffgraham#20 from joshlasdin to add vendor pref…

…ixes to transform properties.
mchlbrnd · Feb 20, 2015 · b51be53 · b51be53
1 parent 391cd42
commit b51be53
Show file tree

Hide file tree

Showing 76 changed files with 7,724 additions and 220 deletions.
diff --git a/_attention-seekers/_bounce.scss b/_attention-seekers/_bounce.scss
@@ -1,7 +1,7 @@
 @include keyframes(bounce) {
-	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
-	40% {transform: translateY(-30px);}
-	60% {transform: translateY(-15px);}
+	0%, 20%, 50%, 80%, 100% {@include transform(translateY(0));}
+	40% {@include transform(translateY(-30px));}
+	60% {@include transform(translateY(-15px));}
 }
 
 @mixin bounce($count: $countDefault, $duration: $durationDefault, $delay: $delayDefault, $function: $functionDefault, $fill: $fillDefault, $visibility: $visibilityDefault) {

diff --git a/_attention-seekers/_pulse.scss b/_attention-seekers/_pulse.scss
@@ -1,9 +1,9 @@
 // originally authored by Nick Pettit - https://github.com/nickpettit/glide
 
 @include keyframes(pulse) {
-	  0% {transform: scale(1);}
-   50% {transform: scale(1.1);}
-  100% {transform: scale(1);}
+	  0% {@include transform(scale(1));}
+   50% {@include transform(scale(1.1));}
+  100% {@include transform(scale(1));}
 }
 
 @mixin pulse($count: $countDefault, $duration: $durationDefault, $delay: $delayDefault, $function: $functionDefault, $fill: $fillDefault, $visibility: $visibilityDefault) {

diff --git a/_attention-seekers/_rubberBand.scss b/_attention-seekers/_rubberBand.scss
@@ -1,11 +1,11 @@
 @include keyframes(rubberBand) {
-	  0% {transform: scale3d(1, 1, 1);}
-   30% {transform: scale3d(1.25, 0.75, 1);}
-	 40% {transform: scale3d(0.75, 1.25, 1);}
-	 50% {transform: scale3d(1.15, 0.85, 1);}
-	 65% {transform: scale3d(.95, 1.05, 1);}
-	 75% {transform: scale3d(1.05, .95, 1);}
-	100% {transform: scale3d(1, 1, 1);}
+	  0% {@include transform(scale3d(1, 1, 1));}
+   30% {@include transform(scale3d(1.25, 0.75, 1));}
+	 40% {@include transform(scale3d(0.75, 1.25, 1));}
+	 50% {@include transform(scale3d(1.15, 0.85, 1));}
+	 65% {@include transform(scale3d(.95, 1.05, 1));}
+	 75% {@include transform(scale3d(1.05, .95, 1));}
+	100% {@include transform(scale3d(1, 1, 1));}
 }
 
 @mixin rubberBand($count: $countDefault, $duration: $durationDefault, $delay: $delayDefault, $function: $functionDefault, $fill: $fillDefault, $visibility: $visibilityDefault) {

diff --git a/_attention-seekers/_shake.scss b/_attention-seekers/_shake.scss
@@ -1,7 +1,7 @@
 @include keyframes(shake) {
-  0%, 100% {transform: translateX(0);}
-	10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
-	20%, 40%, 60%, 80% {transform: translateX(10px);}
+  0%, 100% {@include transform(translateX(0));}
+	10%, 30%, 50%, 70%, 90% {@include transform(translateX(-10px));}
+	20%, 40%, 60%, 80% {@include transform(translateX(10px));}
 }
 
 @mixin shake($count: $countDefault, $duration: $durationDefault, $delay: $delayDefault, $function: $functionDefault, $fill: $fillDefault, $visibility: $visibilityDefault) {

diff --git a/_attention-seekers/_swing.scss b/_attention-seekers/_swing.scss
@@ -1,10 +1,10 @@
 @include keyframes(swing) {
-	20%, 40%, 60%, 80%, 100% {transform-origin: top center;}
-	20% {transform: rotate(15deg);}
-	40% {transform: rotate(-10deg);}
-	60% {transform: rotate(5deg);}
-	80% {transform: rotate(-5deg);}
-	100% {transform: rotate(0deg);}
+	20%, 40%, 60%, 80%, 100% {@include transform-origin(top center);}
+	20% {@include transform(rotate(15deg));}
+	40% {@include transform(rotate(-10deg));}
+	60% {@include transform(rotate(5deg));}
+	80% {@include transform(rotate(-5deg));}
+	100% {@include transform(rotate(0deg));}
 }
 
 @mixin swing($count: $countDefault, $duration: $durationDefault, $delay: $delayDefault, $function: $functionDefault, $fill: $fillDefault, $visibility: $visibilityDefault) {

diff --git a/_attention-seekers/_tada.scss b/_attention-seekers/_tada.scss
@@ -1,9 +1,9 @@
 @include keyframes(tada) {
-	0% {transform: scale(1);}
-	10%, 20% {transform: scale(0.9) rotate(-3deg);}
-	30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);}
-	40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);}
-	100% {transform: scale(1) rotate(0);}
+	0% {@include transform(scale(1));}
+	10%, 20% {@include transform(scale(0.9) rotate(-3deg));}
+	30%, 50%, 70%, 90% {@include transform(scale(1.1) rotate(3deg));}
+	40%, 60%, 80% {@include transform(scale(1.1) rotate(-3deg));}
+	100% {@include transform(scale(1) rotate(0));}
 }
 
 @mixin tada($count: $countDefault, $duration: $durationDefault, $delay: $delayDefault, $function: $functionDefault, $fill: $fillDefault, $visibility: $visibilityDefault) {

diff --git a/_attention-seekers/_wobble.scss b/_attention-seekers/_wobble.scss
@@ -1,13 +1,13 @@
 // originally authored by Nick Pettit - https://github.com/nickpettit/glide
 
 @include keyframes(wobble) {
-    0% {transform: translateX(0%);}
-   15% {transform: translateX(-25%) rotate(-5deg);}
-   30% {transform: translateX(20%) rotate(3deg);}
-   45% {transform: translateX(-15%) rotate(-3deg);}
-   60% {transform: translateX(10%) rotate(2deg);}
-   75% {transform: translateX(-5%) rotate(-1deg);}
-  100% {transform: translateX(0%);}
+    0% {@include transform(translateX(0%));}
+   15% {@include transform(translateX(-25%) rotate(-5deg));}
+   30% {@include transform(translateX(20%) rotate(3deg));}
+   45% {@include transform(translateX(-15%) rotate(-3deg));}
+   60% {@include transform(translateX(10%) rotate(2deg));}
+   75% {@include transform(translateX(-5%) rotate(-1deg));}
+  100% {@include transform(translateX(0%));}
 }
 
 @mixin wobble($count: $countDefault, $duration: $durationDefault, $delay: $delayDefault, $function: $functionDefault, $fill: $fillDefault, $visibility: $visibilityDefault) {

diff --git a/_bouncing-entrances/_bounceIn.scss b/_bouncing-entrances/_bounceIn.scss
@@ -1,17 +1,17 @@
 @include keyframes(bounceIn) {
   0% {
     opacity: 0;
-    transform: scale(.3);
+    @include transform(scale(.3));
   }
   50% {
     opacity: 1;
-    transform: scale(1.05);
+    @include transform(scale(1.05));
   }
   70% {
-    transform: scale(.9);
+	@include transform(scale(.9));
   }
   100% {
-    transform: scale(1);
+	@include transform(scale(1));
   }
 }
 

diff --git a/_bouncing-entrances/_bounceInDown.scss b/_bouncing-entrances/_bounceInDown.scss
@@ -1,17 +1,17 @@
 @include keyframes(bounceInDown) {
   0% {
     opacity: 0;
-    transform: translateY(-2000px);
+    @include transform(translateY(-2000px));
     }
   60% {
     opacity: 1;
-    transform: translateY(30px);
+    @include transform(translateY(30px));
   }
   80% {
-    transform: translateY(-10px);
+    @include transform(translateY(-10px));
   }
   100% {
-    transform: translateY(0);
+    @include transform(translateY(0));
   }
 }
 

diff --git a/_bouncing-entrances/_bounceInLeft.scss b/_bouncing-entrances/_bounceInLeft.scss
@@ -1,17 +1,17 @@
 @include keyframes(bounceInLeft) {
   0% {
     opacity: 0;
-    transform: translateX(-2000px);
+    @include transform(translateX(-2000px));
   }
   60% {
     opacity: 1;
-    transform: translateX(30px);
+    @include transform(translateX(30px));
   }
   80% {
-    transform: translateX(-10px);
+    @include transform(translateX(-10px));
   }
   100% {
-    transform: translateX(0);
+    @include transform(translateX(0));
   }
 }
 

diff --git a/_bouncing-entrances/_bounceInRight.scss b/_bouncing-entrances/_bounceInRight.scss
@@ -1,17 +1,17 @@
 @include keyframes(bounceInRight) {
   0% {
     opacity: 0;
-    transform: translateX(2000px);
+    @include transform(translateX(2000px));
   }
   60% {
     opacity: 1;
-    transform: translateX(-30px);
+    @include transform(translateX(-30px));
   }
   80% {
-    transform: translateX(10px);
+    @include transform(translateX(10px));
   }
   100% {
-    transform: translateX(0);
+    @include transform(translateX(0));
   }
 }
 

diff --git a/_bouncing-entrances/_bounceInUp.scss b/_bouncing-entrances/_bounceInUp.scss
@@ -1,17 +1,17 @@
 @include keyframes(bounceInUp) {
   0% {
     opacity: 0;
-    transform: translateY(2000px);
+    @include transform(translateY(2000px));
   }
   60% {
     opacity: 1;
-    transform: translateY(-30px);
+    @include transform(translateY(-30px));
   }
   80% {
-    transform: translateY(10px);
+    @include transform(translateY(10px));
   }
   100% {
-    transform: translateY(0);
+    @include transform(translateY(0));
   }
 }
 

diff --git a/_bouncing-exits/_bounceOut.scss b/_bouncing-exits/_bounceOut.scss
@@ -1,17 +1,17 @@
 @include keyframes(bounceOut) {
   0% {
-    transform: scale(1);
+    @include transform(scale(1));
   }
   25% {
-    transform: scale(.95);
+    @include transform(scale(.95));
   }
   50% {
     opacity: 1;
-    transform: scale(1.1);
+    @include transform(scale(1.1));
   }
   100% {
     opacity: 0;
-    transform: scale(.3);
+    @include transform(scale(.3));
   }
 }
 

diff --git a/_bouncing-exits/_bounceOutDown.scss b/_bouncing-exits/_bounceOutDown.scss
@@ -1,14 +1,14 @@
 @include keyframes(bounceOutDown) {
   0% {
-    transform: translateY(0);
+    @include transform(translateY(0));
   }
   20% {
     opacity: 1;
-    transform: translateY(-20px);
+    @include transform(translateY(-20px));
   }
   100% {
     opacity: 0; 
-    transform: translateY(2000px);
+    @include transform(translateY(2000px));
   }
 }
 

diff --git a/_bouncing-exits/_bounceOutLeft.scss b/_bouncing-exits/_bounceOutLeft.scss
@@ -1,14 +1,14 @@
 @include keyframes(bounceOutLeft) {
     0% {
-      transform: translateX(0);
+      @include transform(translateX(0));
     }
    20% {
      opacity: 1;
-     transform: translateX(20px);
+     @include transform(translateX(20px));
     }
   100% {
     opacity: 0;
-    transform: translateX(-2000px);
+    @include transform(translateX(-2000px));
   }
 }
 

diff --git a/_bouncing-exits/_bounceOutRight.scss b/_bouncing-exits/_bounceOutRight.scss
@@ -1,14 +1,14 @@
 @include keyframes(bounceOutRight) {
     0% {
-      transform: translateX(0);
+      @include transform(translateX(0));
     }
    20% {
      opacity: 1;
-     transform: translateX(-20px);
+     @include transform(translateX(-20px));
     }
   100% {
     opacity: 0;
-    transform: translateX(2000px);
+    @include transform(translateX(2000px));
   }
 }
 

diff --git a/_bouncing-exits/_bounceOutUp.scss b/_bouncing-exits/_bounceOutUp.scss
@@ -1,14 +1,14 @@
 @include keyframes(bounceOutUp) {
   0% {
-	  transform: translateY(0);
+	  @include transform(translateY(0));
 	 }
   20% {
     opacity: 1;
-    transform: translateY(20px);
+    @include transform(translateY(20px));
   }
 	100% {
   	opacity: 0;
-  	transform: translateY(-2000px);
+  	@include transform(translateY(-2000px));
   }
 }
 

diff --git a/_fading-entrances/_fadeInDown.scss b/_fading-entrances/_fadeInDown.scss
@@ -1,11 +1,11 @@
 @include keyframes(fadeInDown) {
   0% {
     opacity: 0;
-    transform: translateY(-20px);
+    @include transform(translateY(-20px));
   }
   100% {
     opacity: 1;
-    transform: translateY(0);
+    @include transform(translateY(0));
   }
 }
 

diff --git a/_fading-entrances/_fadeInDownBig.scss b/_fading-entrances/_fadeInDownBig.scss
@@ -1,11 +1,11 @@
 @include keyframes(fadeInDownBig) {
   0% {
     opacity: 0;
-    transform: translateY(-2000px);
+    @include transform(translateY(-2000px));
   }
   100% {
     opacity: 1;
-    transform: translateY(0);
+    @include transform(translateY(0));
   }
 }
 

diff --git a/_fading-entrances/_fadeInLeft.scss b/_fading-entrances/_fadeInLeft.scss
@@ -1,11 +1,11 @@
 @include keyframes(fadeInLeft) {
   0% {
     opacity: 0;
-    transform: translateX(-20px);
+    @include transform(translateX(-20px));
   }
   100% {
     opacity: 1;
-    transform: translateX(0);
+    @include transform(translateX(0));
   }
 }
 

diff --git a/_fading-entrances/_fadeInLeftBig.scss b/_fading-entrances/_fadeInLeftBig.scss
@@ -1,11 +1,11 @@
 @include keyframes(fadeInLeftBig) {
   0% {
     opacity: 0;
-    transform: translateX(-2000px);
+    @include transform(translateX(-2000px));
   }
   100% {
     opacity: 1;
-    transform: translateX(0);
+    @include transform(translateX(0));
   }
 }
 

diff --git a/_fading-entrances/_fadeInRight.scss b/_fading-entrances/_fadeInRight.scss
@@ -1,11 +1,11 @@
 @include keyframes(fadeInRight) {
   0% {
     opacity: 0;
-    transform: translateX(20px);
+    @include transform(translateX(20px));
   }
   100% {
     opacity: 1;
-    transform: translateX(0);
+    @include transform(translateX(0));
   }
 }
 

diff --git a/_fading-entrances/_fadeInRightBig.scss b/_fading-entrances/_fadeInRightBig.scss
@@ -1,11 +1,11 @@
 @include keyframes(fadeInRightBig) {
   0% {
     opacity: 0;
-    transform: translateX(2000px);
+    @include transform(translateX(2000px));
   }
   100% {
     opacity: 1;
-    transform: translateX(0);
+    @include transform(translateX(0));
   }
 }