animate-sass 0.1.0

data/stylesheets/animations/flippers/_flip.scss

@@ -0,0 +1,44 @@
+@mixin flip($prefix) {
+	0% {
+		@include transform(perspective(400px) rotateY(0), $prefix);
+		@include animation-timing-function(ease-out, $prefix: $prefix);
+	}
+	40% {
+		@include transform(perspective(400px) translateZ(150px) rotateY(170deg), $prefix);
+		@include animation-timing-function(ease-out, $prefix: $prefix);
+	}
+	50% {
+		@include transform(perspective(400px) translateZ(150px) rotateY(190deg) scale(1), $prefix);
+		@include animation-timing-function(ease-in, $prefix: $prefix);
+	}
+	80% {
+		@include transform(perspective(400px) rotateY(360deg) scale(.95), $prefix);
+		@include animation-timing-function(ease-in, $prefix: $prefix);
+	}
+	100% {
+		@include transform(perspective(400px) scale(1), $prefix);
+		@include animation-timing-function(ease-in, $prefix: $prefix);
+	}
+}
+
+@if $experimental-support-for-webkit {
+  @-webkit-keyframes flip { @include flip(webkit); }
+}
+@if $experimental-support-for-khtml {
+  @-khtml-keyframes flip { @include flip(khtml); }
+}
+@if $experimental-support-for-mozilla {
+  @-moz-keyframes flip { @include flip(moz); }
+}
+@if $experimental-support-for-microsoft {
+  @-ms-keyframes flip { @include flip(ms); }
+}
+@if $experimental-support-for-opera {
+  @-o-keyframes flip { @include flip(o); }
+}
+@keyframes flip { @include flip(none); }
+
+.flip {
+  @include animation-name(flip);
+  @include backface-visibility(visible !important);
+}

data/stylesheets/animations/flippers/_flipInX.scss

@@ -0,0 +1,38 @@
+@mixin flipInX($prefix) {
+	0% {
+		@include transform(perspective(400px) rotateX(90deg), $prefix);
+		opacity: 0;
+	}
+	40% {
+		@include transform(perspective(400px) rotateX(-10deg), $prefix);
+	}
+	70% {
+		@include transform(perspective(400px) rotateX(10deg), $prefix);
+	}
+	100% {
+		@include transform(perspective(400px) rotateX(0deg), $prefix);
+		opacity: 1;
+	}
+}
+
+@if $experimental-support-for-webkit {
+  @-webkit-keyframes flipInX { @include flipInX(webkit); }
+}
+@if $experimental-support-for-khtml {
+  @-khtml-keyframes flipInX { @include flipInX(khtml); }
+}
+@if $experimental-support-for-mozilla {
+  @-moz-keyframes flipInX { @include flipInX(moz); }
+}
+@if $experimental-support-for-microsoft {
+  @-ms-keyframes flipInX { @include flipInX(ms); }
+}
+@if $experimental-support-for-opera {
+  @-o-keyframes flipInX { @include flipInX(o); }
+}
+@keyframes flipInX { @include flipInX(none); }
+
+.flipInX {
+  @include animation-name(flipInX);
+  @include backface-visibility(visible !important);
+}

data/stylesheets/animations/flippers/_flipInY.scss

@@ -0,0 +1,38 @@
+@mixin flipInY($prefix) {
+	0% {
+		@include transform(perspective(400px) rotateY(90deg), $prefix);
+		opacity: 0;
+	}
+	40% {
+		@include transform(perspective(400px) rotateY(-10deg), $prefix);
+	}
+	70% {
+		@include transform(perspective(400px) rotateY(10deg), $prefix);
+	}
+	100% {
+		@include transform(perspective(400px) rotateY(0deg), $prefix);
+		opacity: 1;
+	}
+}
+
+@if $experimental-support-for-webkit {
+  @-webkit-keyframes flipInY { @include flipInY(webkit); }
+}
+@if $experimental-support-for-khtml {
+  @-khtml-keyframes flipInY { @include flipInY(khtml); }
+}
+@if $experimental-support-for-mozilla {
+  @-moz-keyframes flipInY { @include flipInY(moz); }
+}
+@if $experimental-support-for-microsoft {
+  @-ms-keyframes flipInY { @include flipInY(ms); }
+}
+@if $experimental-support-for-opera {
+  @-o-keyframes flipInY { @include flipInY(o); }
+}
+@keyframes flipInY { @include flipInY(none); }
+
+.flipInY {
+  @include animation-name(flipInY);
+  @include backface-visibility(visible !important);
+}

data/stylesheets/animations/flippers/_flipOutX.scss

@@ -0,0 +1,32 @@
+@mixin flipOutX($prefix) {
+	0% {
+		@include transform(perspective(400px) rotateX(0deg), $prefix);
+		opacity: 1;
+	}
+	100% {
+		@include transform(perspective(400px) rotateX(90deg), $prefix);
+		opacity: 0;
+	}
+}
+
+@if $experimental-support-for-webkit {
+  @-webkit-keyframes flipOutX { @include flipOutX(webkit); }
+}
+@if $experimental-support-for-khtml {
+  @-khtml-keyframes flipOutX { @include flipOutX(khtml); }
+}
+@if $experimental-support-for-mozilla {
+  @-moz-keyframes flipOutX { @include flipOutX(moz); }
+}
+@if $experimental-support-for-microsoft {
+  @-ms-keyframes flipOutX { @include flipOutX(ms); }
+}
+@if $experimental-support-for-opera {
+  @-o-keyframes flipOutX { @include flipOutX(o); }
+}
+@keyframes flipOutX { @include flipOutX(none); }
+
+.flipOutX {
+  @include animation-name(flipOutX);
+  @include backface-visibility(visible !important);
+}

data/stylesheets/animations/flippers/_flipOutY.scss

@@ -0,0 +1,32 @@
+@mixin flipOutY($prefix) {
+	0% {
+		@include transform(perspective(400px) rotateY(0deg), $prefix);
+		opacity: 1;
+	}
+	100% {
+		@include transform(perspective(400px) rotateY(90deg), $prefix);
+		opacity: 0;
+	}
+}
+
+@if $experimental-support-for-webkit {
+  @-webkit-keyframes flipOutY { @include flipOutY(webkit); }
+}
+@if $experimental-support-for-khtml {
+  @-khtml-keyframes flipOutY { @include flipOutY(khtml); }
+}
+@if $experimental-support-for-mozilla {
+  @-moz-keyframes flipOutY { @include flipOutY(moz); }
+}
+@if $experimental-support-for-microsoft {
+  @-ms-keyframes flipOutY { @include flipOutY(ms); }
+}
+@if $experimental-support-for-opera {
+  @-o-keyframes flipOutY { @include flipOutY(o); }
+}
+@keyframes flipOutY { @include flipOutY(none); }
+
+.flipOutY {
+  @include animation-name(flipOutY);
+  @include backface-visibility(visible !important);
+}

data/stylesheets/animations/rotating-entrances/_rotateIn.scss

@@ -0,0 +1,33 @@
+@mixin rotateIn($prefix) {
+  0% {
+    @include transform-origin(center center, $prefix);
+    @include transform(rotate(-200deg), $prefix);
+    opacity: 0;
+  }
+  100% {
+    @include transform-origin(center center, $prefix);
+    @include transform(rotate(0), $prefix);
+    opacity: 1;
+  }
+}
+
+@if $experimental-support-for-webkit {
+  @-webkit-keyframes rotateIn { @include rotateIn(webkit); }
+}
+@if $experimental-support-for-khtml {
+  @-khtml-keyframes rotateIn { @include rotateIn(khtml); }
+}
+@if $experimental-support-for-mozilla {
+  @-moz-keyframes rotateIn { @include rotateIn(moz); }
+}
+@if $experimental-support-for-microsoft {
+  @-ms-keyframes rotateIn { @include rotateIn(ms); }
+}
+@if $experimental-support-for-opera {
+  @-o-keyframes rotateIn { @include rotateIn(o); }
+}
+@keyframes rotateIn { @include rotateIn(none); }
+
+.rotateIn {
+  @include animation-name(rotateIn);
+}

data/stylesheets/animations/rotating-entrances/_rotateInDownLeft.scss

@@ -0,0 +1,33 @@
+@mixin rotateInDownLeft($prefix) {
+  0% {
+    @include transform-origin(left bottom, $prefix);
+    @include transform(rotate(-90deg), $prefix);
+    opacity: 0;
+  }
+  100% {
+    @include transform-origin(left bottom, $prefix);
+    @include transform(rotate(0), $prefix);
+    opacity: 1;
+  }
+}
+
+@if $experimental-support-for-webkit {
+  @-webkit-keyframes rotateInDownLeft { @include rotateInDownLeft(webkit); }
+}
+@if $experimental-support-for-khtml {
+  @-khtml-keyframes rotateInDownLeft { @include rotateInDownLeft(khtml); }
+}
+@if $experimental-support-for-mozilla {
+  @-moz-keyframes rotateInDownLeft { @include rotateInDownLeft(moz); }
+}
+@if $experimental-support-for-microsoft {
+  @-ms-keyframes rotateInDownLeft { @include rotateInDownLeft(ms); }
+}
+@if $experimental-support-for-opera {
+  @-o-keyframes rotateInDownLeft { @include rotateInDownLeft(o); }
+}
+@keyframes rotateInDownLeft { @include rotateInDownLeft(none); }
+
+.rotateInDownLeft {
+  @include animation-name(rotateInDownLeft);
+}

data/stylesheets/animations/rotating-entrances/_rotateInDownRight.scss

@@ -0,0 +1,33 @@
+@mixin rotateInDownRight($prefix) {
+  0% {
+    @include transform-origin(right bottom, $prefix);
+    @include transform(rotate(90deg), $prefix);
+    opacity: 0;
+  }
+  100% {
+    @include transform-origin(right bottom, $prefix);
+    @include transform(rotate(0), $prefix);
+    opacity: 1;
+  }
+}
+
+@if $experimental-support-for-webkit {
+  @-webkit-keyframes rotateInDownRight { @include rotateInDownRight(webkit); }
+}
+@if $experimental-support-for-khtml {
+  @-khtml-keyframes rotateInDownRight { @include rotateInDownRight(khtml); }
+}
+@if $experimental-support-for-mozilla {
+  @-moz-keyframes rotateInDownRight { @include rotateInDownRight(moz); }
+}
+@if $experimental-support-for-microsoft {
+  @-ms-keyframes rotateInDownRight { @include rotateInDownRight(ms); }
+}
+@if $experimental-support-for-opera {
+  @-o-keyframes rotateInDownRight { @include rotateInDownRight(o); }
+}
+@keyframes rotateInDownRight { @include rotateInDownRight(none); }
+
+.rotateInDownRight {
+  @include animation-name(rotateInDownRight);
+}

data/stylesheets/animations/rotating-entrances/_rotateInUpLeft.scss

@@ -0,0 +1,33 @@
+@mixin rotateInUpLeft($prefix) {
+  0% {
+    @include transform-origin(left bottom, $prefix);
+    @include transform(rotate(90deg), $prefix);
+    opacity: 0;
+  }
+  100% {
+    @include transform-origin(left bottom, $prefix);
+    @include transform(rotate(0), $prefix);
+    opacity: 1;
+  }
+}
+
+@if $experimental-support-for-webkit {
+  @-webkit-keyframes rotateInUpLeft { @include rotateInUpLeft(webkit); }
+}
+@if $experimental-support-for-khtml {
+  @-khtml-keyframes rotateInUpLeft { @include rotateInUpLeft(khtml); }
+}
+@if $experimental-support-for-mozilla {
+  @-moz-keyframes rotateInUpLeft { @include rotateInUpLeft(moz); }
+}
+@if $experimental-support-for-microsoft {
+  @-ms-keyframes rotateInUpLeft { @include rotateInUpLeft(ms); }
+}
+@if $experimental-support-for-opera {
+  @-o-keyframes rotateInUpLeft { @include rotateInUpLeft(o); }
+}
+@keyframes rotateInUpLeft { @include rotateInUpLeft(none); }
+
+.rotateInUpLeft {
+  @include animation-name(rotateInUpLeft);
+}

data/stylesheets/animations/rotating-entrances/_rotateInUpRight.scss

@@ -0,0 +1,33 @@
+@mixin rotateInUpRight($prefix) {
+  0% {
+    @include transform-origin(right bottom, $prefix);
+    @include transform(rotate(-90deg), $prefix);
+    opacity: 0;
+  }
+  100% {
+    @include transform-origin(right bottom, $prefix);
+    @include transform(rotate(0), $prefix);
+    opacity: 1;
+  }
+}
+
+@if $experimental-support-for-webkit {
+  @-webkit-keyframes rotateInUpRight { @include rotateInUpRight(webkit); }
+}
+@if $experimental-support-for-khtml {
+  @-khtml-keyframes rotateInUpRight { @include rotateInUpRight(khtml); }
+}
+@if $experimental-support-for-mozilla {
+  @-moz-keyframes rotateInUpRight { @include rotateInUpRight(moz); }
+}
+@if $experimental-support-for-microsoft {
+  @-ms-keyframes rotateInUpRight { @include rotateInUpRight(ms); }
+}
+@if $experimental-support-for-opera {
+  @-o-keyframes rotateInUpRight { @include rotateInUpRight(o); }
+}
+@keyframes rotateInUpRight { @include rotateInUpRight(none); }
+
+.rotateInUpRight {
+  @include animation-name(rotateInUpRight);
+}

data/stylesheets/animations/rotating-exits/_rotateOut.scss

@@ -0,0 +1,33 @@
+@mixin rotateOut($prefix) {
+  0% {
+    @include transform-origin(center center, $prefix);
+    @include transform(rotate(0), $prefix);
+    opacity: 1;
+  }
+  100% {
+    @include transform-origin(center center, $prefix);
+    @include transform(rotate(200deg), $prefix);
+    opacity: 0;
+  }
+}
+
+@if $experimental-support-for-webkit {
+  @-webkit-keyframes rotateOut { @include rotateOut(webkit); }
+}
+@if $experimental-support-for-khtml {
+  @-khtml-keyframes rotateOut { @include rotateOut(khtml); }
+}
+@if $experimental-support-for-mozilla {
+  @-moz-keyframes rotateOut { @include rotateOut(moz); }
+}
+@if $experimental-support-for-microsoft {
+  @-ms-keyframes rotateOut { @include rotateOut(ms); }
+}
+@if $experimental-support-for-opera {
+  @-o-keyframes rotateOut { @include rotateOut(o); }
+}
+@keyframes rotateOut { @include rotateOut(none); }
+
+.rotateOut {
+  @include animation-name(rotateOut);
+}

data/stylesheets/animations/rotating-exits/_rotateOutDownLeft.scss

@@ -0,0 +1,33 @@
+@mixin rotateOutDownLeft($prefix) {
+  0% {
+    @include transform-origin(left bottom, $prefix);
+    @include transform(rotate(0), $prefix);
+    opacity: 1;
+  }
+  100% {
+    @include transform-origin(left bottom, $prefix);
+    @include transform(rotate(90deg), $prefix);
+    opacity: 0;
+  }
+}
+
+@if $experimental-support-for-webkit {
+  @-webkit-keyframes rotateOutDownLeft { @include rotateOutDownLeft(webkit); }
+}
+@if $experimental-support-for-khtml {
+  @-khtml-keyframes rotateOutDownLeft { @include rotateOutDownLeft(khtml); }
+}
+@if $experimental-support-for-mozilla {
+  @-moz-keyframes rotateOutDownLeft { @include rotateOutDownLeft(moz); }
+}
+@if $experimental-support-for-microsoft {
+  @-ms-keyframes rotateOutDownLeft { @include rotateOutDownLeft(ms); }
+}
+@if $experimental-support-for-opera {
+  @-o-keyframes rotateOutDownLeft { @include rotateOutDownLeft(o); }
+}
+@keyframes rotateOutDownLeft { @include rotateOutDownLeft(none); }
+
+.rotateOutDownLeft {
+  @include animation-name(rotateOutDownLeft);
+}

data/stylesheets/animations/rotating-exits/_rotateOutDownRight.scss

@@ -0,0 +1,33 @@
+@mixin rotateOutDownRight($prefix) {
+  0% {
+    @include transform-origin(right bottom, $prefix);
+    @include transform(rotate(0), $prefix);
+    opacity: 1;
+  }
+  100% {
+    @include transform-origin(right bottom, $prefix);
+    @include transform(rotate(-90deg), $prefix);
+    opacity: 0;
+  }
+}
+
+@if $experimental-support-for-webkit {
+  @-webkit-keyframes rotateOutDownRight { @include rotateOutDownRight(webkit); }
+}
+@if $experimental-support-for-khtml {
+  @-khtml-keyframes rotateOutDownRight { @include rotateOutDownRight(khtml); }
+}
+@if $experimental-support-for-mozilla {
+  @-moz-keyframes rotateOutDownRight { @include rotateOutDownRight(moz); }
+}
+@if $experimental-support-for-microsoft {
+  @-ms-keyframes rotateOutDownRight { @include rotateOutDownRight(ms); }
+}
+@if $experimental-support-for-opera {
+  @-o-keyframes rotateOutDownRight { @include rotateOutDownRight(o); }
+}
+@keyframes rotateOutDownRight { @include rotateOutDownRight(none); }
+
+.rotateOutDownRight {
+  @include animation-name(rotateOutDownRight);
+}