compass-animate 0.0.1

data/stylesheets/animate/flip.scss

@@ -0,0 +1,41 @@
+@-webkit-keyframes flip {
+  0% {-webkit-transform: perspective(400px) rotateY(0);-webkit-animation-timing-function: ease-out;}
+  40% {-webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg); -webkit-animation-timing-function: ease-out;}
+  50% {-webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -webkit-animation-timing-function: ease-in;}
+  80% {-webkit-transform: perspective(400px) rotateY(360deg) scale(.95); -webkit-animation-timing-function: ease-in;}
+  100% {-webkit-transform: perspective(400px) scale(1); -webkit-animation-timing-function: ease-in;}
+}
+
+@-moz-keyframes flip {
+  0% {-moz-transform: perspective(400px) rotateY(0); -moz-animation-timing-function: ease-out;}
+  40% {-moz-transform: perspective(400px) translateZ(150px) rotateY(170deg); -moz-animation-timing-function: ease-out;}
+  50% {-moz-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -moz-animation-timing-function: ease-in;}
+  80% {-moz-transform: perspective(400px) rotateY(360deg) scale(.95); -moz-animation-timing-function: ease-in;}
+  100% {-moz-transform: perspective(400px) scale(1); -moz-animation-timing-function: ease-in;}
+}
+
+@-o-keyframes flip {
+  0% {-o-transform: perspective(400px) rotateY(0); -o-animation-timing-function: ease-out;}
+  40% {
+    -o-transform: perspective(400px) translateZ(150px) rotateY(170deg); -o-animation-timing-function: ease-out;}
+  50% {-o-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -o-animation-timing-function: ease-in;}
+  80% {-o-transform: perspective(400px) rotateY(360deg) scale(.95); -o-animation-timing-function: ease-in;}
+  100% {-o-transform: perspective(400px) scale(1); -o-animation-timing-function: ease-in;}
+}
+@keyframes flip {
+  0% {transform: perspective(400px) rotateY(0); animation-timing-function: ease-out;}
+  40% {transform: perspective(400px) translateZ(150px) rotateY(170deg); animation-timing-function: ease-out;}
+  50% {transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); animation-timing-function: ease-in;}
+  80% {transform: perspective(400px) rotateY(360deg) scale(.95); animation-timing-function: ease-in;}
+  100% {transform: perspective(400px) scale(1); animation-timing-function: ease-in;}
+}
+
+@mixin flip($duration: 1s, $delay: .2s, $function: ease, $fill: both, $visibility: hidden) {
+  @include transform-style(preserve-3d);
+  @include animation-name(flip);
+  @include duration($duration);
+  @include delay($delay);
+  @include function($function);
+  @include fill-mode($fill);
+  @include visibility($visibility);
+}

data/stylesheets/animate/flipInX.scss

@@ -0,0 +1,33 @@
+@-webkit-keyframes flipInX {
+    0% {-webkit-transform: perspective(400px) rotateX(90deg); opacity: 0;}
+    40% {-webkit-transform: perspective(400px) rotateX(-10deg);}
+    70% {-webkit-transform: perspective(400px) rotateX(10deg);}
+    100% {-webkit-transform: perspective(400px) rotateX(0deg); opacity: 1;}
+}
+@-moz-keyframes flipInX {
+    0% {-moz-transform: perspective(400px) rotateX(90deg); opacity: 0;}
+    40% {-moz-transform: perspective(400px) rotateX(-10deg);}
+    70% {-moz-transform: perspective(400px) rotateX(10deg);}
+    100% {-moz-transform: perspective(400px) rotateX(0deg); opacity: 1;}
+}
+@-o-keyframes flipInX {
+    0% {-o-transform: perspective(400px) rotateX(90deg); opacity: 0;}
+    40% {-o-transform: perspective(400px) rotateX(-10deg);}
+    70% {-o-transform: perspective(400px) rotateX(10deg);}
+    100% {-o-transform: perspective(400px) rotateX(0deg); opacity: 1;}
+}
+@keyframes flipInX {
+    0% {transform: perspective(400px) rotateX(90deg); opacity: 0;}
+    40% {transform: perspective(400px) rotateX(-10deg);}
+    70% {transform: perspective(400px) rotateX(10deg);}
+    100% {transform: perspective(400px) rotateX(0deg); opacity: 1;}
+}
+
+@mixin flipInX($duration: 1s, $delay: .2s, $function: ease, $fill: both, $visibility: hidden) {
+  @include animation-name(flipInX);
+  @include duration($duration);
+  @include delay($delay);
+  @include function($function);
+  @include fill-mode($fill);
+  @include visibility($visibility);
+}

data/stylesheets/animate/flipInY.scss

@@ -0,0 +1,39 @@
+@-webkit-keyframes flipInY {
+  0% {-webkit-transform: perspective(400px) rotateY(90deg); opacity: 0;}
+  40% {-webkit-transform: perspective(400px) rotateY(-10deg);}
+  70% {-webkit-transform: perspective(400px) rotateY(10deg);}
+  100% {-webkit-transform: perspective(400px) rotateY(0deg); opacity: 1;}
+}
+@-moz-keyframes flipInY {
+  0% {-moz-transform: perspective(400px) rotateY(90deg); opacity: 0;}
+  40% {-moz-transform: perspective(400px) rotateY(-10deg);}
+  70% {-moz-transform: perspective(400px) rotateY(10deg);}
+  100% {-moz-transform: perspective(400px) rotateY(0deg); opacity: 1;}
+}
+@-ms-keyframes flipInY {
+  0% {-ms-transform: perspective(400px) rotateY(90deg); opacity: 0;}
+  40% {-ms-transform: perspective(400px) rotateY(-10deg);}
+  70% {-ms-transform: perspective(400px) rotateY(10deg);}
+  100% {-ms-transform: perspective(400px) rotateY(0deg); opacity: 1;}
+}
+@-o-keyframes flipInY {
+  0% {-o-transform: perspective(400px) rotateY(90deg); opacity: 0;}
+  40% {-o-transform: perspective(400px) rotateY(-10deg);}
+  70% {-o-transform: perspective(400px) rotateY(10deg);}
+  100% {-o-transform: perspective(400px) rotateY(0deg); opacity: 1;}
+}
+@keyframes flipInY {
+  0% {transform: perspective(400px) rotateY(90deg); opacity: 0;}
+  40% {transform: perspective(400px) rotateY(-10deg);}
+  70% {transform: perspective(400px) rotateY(10deg);}
+  100% {transform: perspective(400px) rotateY(0deg); opacity: 1;}
+}
+
+@mixin flipInY($duration: 1s, $delay: .2s, $function: ease, $fill: both, $visibility: hidden) {
+  @include animation-name(flipInY);
+  @include duration($duration);
+  @include delay($delay);
+  @include function($function);
+  @include fill-mode($fill);
+  @include visibility($visibility);
+}

data/stylesheets/animate/flipOutX.scss

@@ -0,0 +1,33 @@
+@-webkit-keyframes flipOutX {
+    0% {-webkit-transform: perspective(400px) rotateX(0deg); opacity: 1;}
+  100% {-webkit-transform: perspective(400px) rotateX(90deg); opacity: 0;}
+}
+
+@-moz-keyframes flipOutX {
+    0% {-moz-transform: perspective(400px) rotateX(0deg); opacity: 1;}
+  100% {-moz-transform: perspective(400px) rotateX(90deg); opacity: 0;}
+}
+
+@-ms-keyframes flipOutX {
+    0% {-ms-transform: perspective(400px) rotateX(0deg); opacity: 1;}
+  100% {-ms-transform: perspective(400px) rotateX(90deg); opacity: 0;}
+}
+
+@-o-keyframes flipOutX {
+    0% {-o-transform: perspective(400px) rotateX(0deg); opacity: 1;}
+  100% {-o-transform: perspective(400px) rotateX(90deg); opacity: 0;}
+}
+
+@keyframes flipOutX {
+    0% {transform: perspective(400px) rotateX(0deg); opacity: 1;}
+  100% {transform: perspective(400px) rotateX(90deg); opacity: 0;}
+}
+
+@mixin flipOutX($duration: 1s, $delay: .2s, $function: ease, $fill: both, $visibility: hidden) {
+  @include animation-name(flipOutX);
+  @include duration($duration);
+  @include delay($delay);
+  @include function($function);
+  @include fill-mode($fill);
+  @include visibility($visibility);
+}

data/stylesheets/animate/flipOutY.scss

@@ -0,0 +1,29 @@
+@-webkit-keyframes flipOutY {
+    0% {-webkit-transform: perspective(400px) rotateY(0deg); opacity: 1;}
+  100% {-webkit-transform: perspective(400px) rotateY(90deg); opacity: 0;}
+}
+@-moz-keyframes flipOutY {
+    0% {-moz-transform: perspective(400px) rotateY(0deg); opacity: 1;}
+  100% {-moz-transform: perspective(400px) rotateY(90deg); opacity: 0;}
+}
+@-ms-keyframes flipOutY {
+    0% {-ms-transform: perspective(400px) rotateY(0deg); opacity: 1;}
+  100% {-ms-transform: perspective(400px) rotateY(90deg); opacity: 0;}
+}
+@-o-keyframes flipOutY {
+    0% {-o-transform: perspective(400px) rotateY(0deg); opacity: 1;}
+  100% {-o-transform: perspective(400px) rotateY(90deg); opacity: 0;}
+}
+@keyframes flipOutY {
+    0% {transform: perspective(400px) rotateY(0deg); opacity: 1;}
+  100% {transform: perspective(400px) rotateY(90deg); opacity: 0;}
+}
+
+@mixin flipOutY($duration: 1s, $delay: .2s, $function: ease, $fill: both, $visibility: hidden) {
+  @include animation-name(flipOutY);
+  @include duration($duration);
+  @include delay($delay);
+  @include function($function);
+  @include fill-mode($fill);
+  @include visibility($visibility);
+}

data/stylesheets/animate/hinge.scss

@@ -0,0 +1,48 @@
+@-webkit-keyframes hinge {
+  0% {-webkit-transform: rotate(0); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out;}
+  20%, 60% {-webkit-transform: rotate(80deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out;}
+  40% {-webkit-transform: rotate(60deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out;}
+  80% {-webkit-transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out;}
+  100% {-webkit-transform: translateY(700px); opacity: 0;}
+}
+
+@-moz-keyframes hinge {
+  0% {-moz-transform: rotate(0); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out;}
+  20%, 60% {-moz-transform: rotate(80deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out;}
+  40% {-moz-transform: rotate(60deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out;}
+  80% {-moz-transform: rotate(60deg) translateY(0); opacity: 1; -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out;}
+  100% {-moz-transform: translateY(700px); opacity: 0;}
+}
+
+@-ms-keyframes hinge {
+  0% {-ms-transform: rotate(0); -ms-transform-origin: top left; -ms-animation-timing-function: ease-in-out;}
+  20%, 60% {-ms-transform: rotate(80deg); -ms-transform-origin: top left; -ms-animation-timing-function: ease-in-out;}
+  40% {-ms-transform: rotate(60deg); -ms-transform-origin: top left; -ms-animation-timing-function: ease-in-out;}
+  80% {-ms-transform: rotate(60deg) translateY(0); opacity: 1; -ms-transform-origin: top left; -ms-animation-timing-function: ease-in-out;}
+  100% {-ms-transform: translateY(700px); opacity: 0;}
+}
+
+@-o-keyframes hinge {
+  0% {-o-transform: rotate(0); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out;}
+  20%, 60% {-o-transform: rotate(80deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out;}
+  40% {-o-transform: rotate(60deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out;}
+  80% {-o-transform: rotate(60deg) translateY(0); opacity: 1; -o-transform-origin: top left; -o-animation-timing-function: ease-in-out;}
+  100% {-o-transform: translateY(700px); opacity: 0;}
+}
+
+@keyframes hinge {
+  0% {transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out;}
+  20%, 60% {transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out;}
+  40% {transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out;}
+  80% {transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out;}
+  100% {transform: translateY(700px); opacity: 0;}
+}
+
+@mixin hinge($duration: 1s, $delay: .2s, $function: ease, $fill: both, $visibility: hidden) {
+  @include animation-name(hinge);
+  @include duration($duration);
+  @include delay($delay);
+  @include function($function);
+  @include fill-mode($fill);
+  @include visibility($visibility);
+}

data/stylesheets/animate/lightSpeedIn.scss

@@ -0,0 +1,44 @@
+@-webkit-keyframes lightSpeedIn {
+	0% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0;}
+	60% { -webkit-transform: translateX(-20%) skewX(30deg); opacity: 1;}
+	80% { -webkit-transform: translateX(0%) skewX(-15deg); opacity: 1;}
+	100% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1;}
+}
+
+@-moz-keyframes lightSpeedIn {
+	0% { -moz-transform: translateX(100%) skewX(-30deg); opacity: 0;}
+	60% { -moz-transform: translateX(-20%) skewX(30deg); opacity: 1;}
+	80% { -moz-transform: translateX(0%) skewX(-15deg); opacity: 1;}
+	100% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1;}
+}
+
+@-ms-keyframes lightSpeedIn {
+	0% { -ms-transform: translateX(100%) skewX(-30deg); opacity: 0;}
+	60% { -ms-transform: translateX(-20%) skewX(30deg); opacity: 1;}
+	80% { -ms-transform: translateX(0%) skewX(-15deg); opacity: 1;}
+	100% { -ms-transform: translateX(0%) skewX(0deg); opacity: 1;}
+}
+
+@-o-keyframes lightSpeedIn {
+	0% { -o-transform: translateX(100%) skewX(-30deg); opacity: 0;}
+	60% { -o-transform: translateX(-20%) skewX(30deg); opacity: 1;}
+	80% { -o-transform: translateX(0%) skewX(-15deg); opacity: 1;}
+	100% { -o-transform: translateX(0%) skewX(0deg); opacity: 1;}
+}
+
+@keyframes lightSpeedIn {
+	0% { transform: translateX(100%) skewX(-30deg); opacity: 0;}
+	60% { transform: translateX(-20%) skewX(30deg); opacity: 1;}
+	80% { transform: translateX(0%) skewX(-15deg); opacity: 1;}
+	100% { transform: translateX(0%) skewX(0deg); opacity: 1;}
+}
+
+@mixin lightSpeedIn($duration, $delay, $fill, $visibility) {
+  @include animation-name(lightSpeedIn);
+	@include function(ease-out);
+  @include duration($duration);
+  @include delay($delay);
+  @include function($function);
+  @include fill-mode($fill);
+  @include visibility($visibility);
+}

data/stylesheets/animate/lightSpeedOut.scss

@@ -0,0 +1,34 @@
+@-webkit-keyframes lightSpeedOut {
+  0% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1;}
+  100% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0;}
+}
+
+@-moz-keyframes lightSpeedOut {
+  0% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1;}
+  100% { -moz-transform: translateX(100%) skewX(-30deg); opacity: 0;}
+}
+
+@-ms-keyframes lightSpeedOut {
+  0% { -ms-transform: translateX(0%) skewX(0deg); opacity: 1;}
+  100% { -ms-transform: translateX(100%) skewX(-30deg); opacity: 0;}
+}
+
+@-o-keyframes lightSpeedOut {
+  0% { -o-transform: translateX(0%) skewX(0deg); opacity: 1;}
+  100% { -o-transform: translateX(100%) skewX(-30deg); opacity: 0;}
+}
+
+@keyframes lightSpeedOut {
+  0% { transform: translateX(0%) skewX(0deg); opacity: 1;}
+  100% { transform: translateX(100%) skewX(-30deg); opacity: 0;}
+}
+
+@mixin lightSpeedOut($duration, $delay, $fill, $visibility) {
+  @include animation-name(lightSpeedOut);
+  @include function(ease-in);
+  @include duration($duration);
+  @include delay($delay);
+  @include function($function);
+  @include fill-mode($fill);
+  @include visibility($visibility);
+}

data/stylesheets/animate/properties.scss

@@ -0,0 +1,78 @@
+// duration     Specifies how many seconds or milliseconds an animation takes
+//                to complete one cycle. Default 0
+//
+// delay        Specifies when the animation will start. Default 0
+//
+// function     Describes how the animation will progress over one cycle of its
+//                duration. Default "ease"
+//
+// count        Specifies the number of times an animation is played. Default 1
+//
+// fill-mode    Specifies whether the effects of an animation are apparent
+//                before the animation starts and after it ends.
+//
+// visibility   Determines whether or not a transformed element is visible when
+//                it is not facing the screen.
+
+@mixin duration($duration: 1s) {
+  -webkit-animation-duration: $duration;
+     -moz-animation-duration: $duration;
+       -ms-animation-duration: $duration;
+        -o-animation-duration: $duration;
+           animation-duration: $duration;
+}
+
+@mixin delay($delay: .2s) {
+  -webkit-animation-delay: $delay;
+     -moz-animation-delay: $delay;
+      -ms-animation-delay: $delay;
+       -o-animation-delay: $delay;
+          animation-delay: $delay;
+}
+
+@mixin function($function: ease) {
+  -webkit-animation-timing-function: $function;
+     -moz-animation-timing-function: $function;
+      -ms-animation-timing-function: $function;
+       -o-animation-timing-function: $function;
+          animation-timing-function: $function;
+}
+
+@mixin fill-mode($fill: both) {
+  -webkit-animation-fill-mode: $fill;
+     -moz-animation-fill-mode: $fill;
+      -ms-animation-fill-mode: $fill;
+       -o-animation-fill-mode: $fill;
+          animation-fill-mode: $fill;
+}
+
+@mixin visibility($visibility: hidden) {
+  -webkit-backface-visibility: $visibility;
+     -moz-backface-visibility: $visibility;
+      -ms-backface-visibility: $visibility;
+       -o-backface-visibility: $visibility;
+          backface-visibility: $visibility;
+}
+
+@mixin transform-origin($transform-origin: center center) {
+  -webkit-transform-origin: $transform-origin;
+     -moz-transform-origin: $transform-origin;
+      -ms-transform-origin: $transform-origin;
+       -o-transform-origin: $transform-origin;
+          transform-origin: $transform-origin;
+}
+
+@mixin transform-style($transform-style: flat) {
+  -webkit-transform-style: $transform-style;
+     -moz-transform-style: $transform-style;
+       -o-transform-style: $transform-style;
+          transform-style: $transform-style;
+}
+
+@mixin animation-name($animation-name) {
+  -webkit-animation-name: $animation-name;
+     -moz-animation-name: $animation-name;
+      -ms-animation-name: $animation-name;
+       -o-animation-name: $animation-name;
+          animation-name: $animation-name;
+}

data/stylesheets/animate/pulse.scss

@@ -0,0 +1,40 @@
+// originally authored by Nick Pettit - https://github.com/nickpettit/glide
+
+@-webkit-keyframes pulse {
+  0% {-webkit-transform: scale(1);}
+  50% {-webkit-transform: scale(1.1);}
+  100% {-webkit-transform: scale(1);}
+}
+
+@-moz-keyframes pulse {
+  0% {-moz-transform: scale(1);}
+  50% {-moz-transform: scale(1.1);}
+  100% {-moz-transform: scale(1);}
+}
+
+@-ms-keyframes pulse {
+  0% {-ms-transform: scale(1);}
+  50% {-ms-transform: scale(1.1);}
+  100% {-ms-transform: scale(1);}
+}
+
+@-o-keyframes pulse {
+  0% {-o-transform: scale(1);}
+  50% {-o-transform: scale(1.1);}
+  100% {-o-transform: scale(1);}
+}
+
+@keyframes pulse {
+  0% {transform: scale(1);}
+  50% {transform: scale(1.1);}
+  100% {transform: scale(1);}
+}
+
+@mixin pulse($duration: 1s, $delay: .2s, $function: ease, $fill: both, $visibility: hidden) {
+  @include animation-name(pulse);
+  @include duration($duration);
+  @include delay($delay);
+  @include function($function);
+  @include fill-mode($fill);
+  @include visibility($visibility);
+}

data/stylesheets/animate/rollIn.scss

@@ -0,0 +1,35 @@
+// originally authored by Nick Pettit - https://github.com/nickpettit/glide
+
+@-webkit-keyframes rollIn {
+  0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg);}
+  100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg);}
+}
+
+@-moz-keyframes rollIn {
+  0% { opacity: 0; -moz-transform: translateX(-100%) rotate(-120deg);}
+  100% { opacity: 1; -moz-transform: translateX(0px) rotate(0deg);}
+}
+
+@-ms-keyframes rollIn {
+  0% { opacity: 0; -ms-transform: translateX(-100%) rotate(-120deg);}
+  100% { opacity: 1; -ms-transform: translateX(0px) rotate(0deg);}
+}
+
+@-o-keyframes rollIn {
+  0% { opacity: 0; -o-transform: translateX(-100%) rotate(-120deg);}
+  100% { opacity: 1; -o-transform: translateX(0px) rotate(0deg);}
+}
+
+@keyframes rollIn {
+  0% { opacity: 0; transform: translateX(-100%) rotate(-120deg);}
+  100% { opacity: 1; transform: translateX(0px) rotate(0deg);}
+}
+
+@mixin rollIn($duration: 1s, $delay: .2s, $function: ease, $fill: both, $visibility: hidden) {
+  @include animation-name(rollIn);
+  @include duration($duration);
+  @include delay($delay);
+  @include function($function);
+  @include fill-mode($fill);
+  @include visibility($visibility);
+}