animate-sass 0.1.0

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

@@ -0,0 +1,33 @@
+@mixin rotateOutUpLeft($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 rotateOutUpLeft { @include rotateOutUpLeft(webkit); }
+}
+@if $experimental-support-for-khtml {
+  @-khtml-keyframes rotateOutUpLeft { @include rotateOutUpLeft(khtml); }
+}
+@if $experimental-support-for-mozilla {
+  @-moz-keyframes rotateOutUpLeft { @include rotateOutUpLeft(moz); }
+}
+@if $experimental-support-for-microsoft {
+  @-ms-keyframes rotateOutUpLeft { @include rotateOutUpLeft(ms); }
+}
+@if $experimental-support-for-opera {
+  @-o-keyframes rotateOutUpLeft { @include rotateOutUpLeft(o); }
+}
+@keyframes rotateOutUpLeft { @include rotateOutUpLeft(none); }
+
+.rotateOutUpLeft {
+  @include animation-name(rotateOutUpLeft);
+}

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

@@ -0,0 +1,33 @@
+@mixin rotateOutUpRight($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 rotateOutUpRight { @include rotateOutUpRight(webkit); }
+}
+@if $experimental-support-for-khtml {
+  @-khtml-keyframes rotateOutUpRight { @include rotateOutUpRight(khtml); }
+}
+@if $experimental-support-for-mozilla {
+  @-moz-keyframes rotateOutUpRight { @include rotateOutUpRight(moz); }
+}
+@if $experimental-support-for-microsoft {
+  @-ms-keyframes rotateOutUpRight { @include rotateOutUpRight(ms); }
+}
+@if $experimental-support-for-opera {
+  @-o-keyframes rotateOutUpRight { @include rotateOutUpRight(o); }
+}
+@keyframes rotateOutUpRight { @include rotateOutUpRight(none); }
+
+.rotateOutUpRight {
+  @include animation-name(rotateOutUpRight);
+}

data/stylesheets/animations/specials/_hinge.scss

@@ -0,0 +1,48 @@
+@mixin hinge($prefix) {
+	0% {
+    @include animation-timing-function(ease-in-out, $prefix);
+    @include transform(rotate(0), $prefix);
+    @include transform-origin(top left, $prefix);
+  }	
+	20%, 60% {
+	  @include animation-timing-function(ease-in-out, $prefix);
+	  @include transform(rotate(80deg), $prefix);
+	  @include transform-origin(top left, $prefix);
+	}
+	40% {
+	  @include transform(rotate(60deg), $prefix);
+	  @include transform-origin(top left, $prefix);
+	  @include animation-timing-function(ease-in-out, $prefix);
+	}
+	80% {
+	  opacity: 1;
+	  @include animation-timing-function(ease-in-out, $prefix);
+	  @include transform(rotate(60deg) translateY(0), $prefix);
+	  @include transform-origin(top left, $prefix);
+	}
+	100% {
+	  @include transform(translateY(700px), $prefix);
+	  opacity: 0;
+	}
+}
+
+@if $experimental-support-for-webkit {
+  @-webkit-keyframes hinge { @include hinge(webkit); }
+}
+@if $experimental-support-for-khtml {
+  @-khtml-keyframes hinge { @include hinge(khtml); }
+}
+@if $experimental-support-for-mozilla {
+  @-moz-keyframes hinge { @include hinge(moz); }
+}
+@if $experimental-support-for-microsoft {
+  @-ms-keyframes hinge { @include hinge(ms); }
+}
+@if $experimental-support-for-opera {
+  @-o-keyframes hinge { @include hinge(o); }
+}
+@keyframes hinge { @include hinge(none); }
+
+.hinge {
+  @include animation-name(hinge);
+}

data/stylesheets/animations/specials/_rollIn.scss

@@ -0,0 +1,33 @@
+// Originally authored by Nick Pettit - https://github.com/nickpettit/glide
+
+@mixin rollIn($prefix) {
+	0% {
+	  opacity: 0;
+		@include transform(translateX(-100%) rotate(-120deg), $prefix);
+	}
+	100% {
+	  opacity: 1;
+		@include transform(translateX(0px) rotate(0deg), $prefix);
+	}
+}
+
+@if $experimental-support-for-webkit {
+  @-webkit-keyframes rollIn { @include rollIn(webkit); }
+}
+@if $experimental-support-for-khtml {
+  @-khtml-keyframes rollIn { @include rollIn(khtml); }
+}
+@if $experimental-support-for-mozilla {
+  @-moz-keyframes rollIn { @include rollIn(moz); }
+}
+@if $experimental-support-for-microsoft {
+  @-ms-keyframes rollIn { @include rollIn(ms); }
+}
+@if $experimental-support-for-opera {
+  @-o-keyframes rollIn { @include rollIn(o); }
+}
+@keyframes rollIn { @include rollIn(none); }
+
+.rollIn {
+  @include animation-name(rollIn);
+}

data/stylesheets/animations/specials/_rollOut.scss

@@ -0,0 +1,33 @@
+// Originally authored by Nick Pettit - https://github.com/nickpettit/glide
+
+@mixin rollOut($prefix) {
+	0% {
+	  opacity: 1;
+		@include transform(translateX(0px) rotate(0deg), $prefix);
+	}
+	100% {
+	  opacity: 0;
+		@include transform(translateX(100%) rotate(120deg), $prefix);
+	}
+}
+
+@if $experimental-support-for-webkit {
+  @-webkit-keyframes rollOut { @include rollOut(webkit); }
+}
+@if $experimental-support-for-khtml {
+  @-khtml-keyframes rollOut { @include rollOut(khtml); }
+}
+@if $experimental-support-for-mozilla {
+  @-moz-keyframes rollOut { @include rollOut(moz); }
+}
+@if $experimental-support-for-microsoft {
+  @-ms-keyframes rollOut { @include rollOut(ms); }
+}
+@if $experimental-support-for-opera {
+  @-o-keyframes rollOut { @include rollOut(o); }
+}
+@keyframes rollOut { @include rollOut(none); }
+
+.rollOut {
+  @include animation-name(rollOut);
+}

data/stylesheets/css3/_animation.scss

@@ -0,0 +1,75 @@
+// Pulled from Bourbon ~ SHA: 93beb25236
+// Bourbon ~ https://github.com/thoughtbot/bourbon
+
+// CSS3 Animations - http://www.w3.org/TR/css3-animations/
+//
+//    Each of these mixins support comma separated lists of values, which
+//    allows different transitions for individual properties to be described
+//    in a single style rule. Each value in the list corresponds to the value
+//    at that same position in the other properties.
+
+@import "animation/animation-name";
+@import "animation/animation-duration";
+@import "animation/animation-timing-function";
+@import "animation/animation-iteration-count";
+@import "animation/animation-direction";
+@import "animation/animation-play-state";
+@import "animation/animation-delay";
+@import "animation/animation-fill-mode";
+
+// Shorthand for a basic animation. Supports multiple parentheses-deliminated values for each variable.
+// Example: @include animation-basic((slideup, fadein), (1.0s, 2.0s), ease-in);
+@mixin animation-basic(
+  $name,
+  $time: 0,
+  $motion: ease
+  ) {
+
+  $length-of-name: length($name);
+  $length-of-time: length($time);
+  $length-of-motion: length($motion);
+
+  @if $length-of-name > 1 {
+    @include animation-name(zip($name));
+  } @else {
+    @include animation-name($name);
+  }
+
+  @if $length-of-time > 1 {
+    @include animation-duration(zip($time));
+  } @else {
+    @include animation-duration($time);
+  }
+
+  @if $length-of-motion > 1 {
+    @include animation-timing-function(zip($motion));
+  } @else {
+    @include animation-timing-function($motion);
+  }
+
+}
+
+// Official animation shorthand property. Needs more work to actually be useful.
+// Spec - http://www.w3.org/TR/css3-animations/#animation
+// Values: name duration timing-function delay iteration-count direction
+
+@mixin animation(
+
+  $name: fadeIn,              // none | keyframe at-rule name
+  $duration: 1s,              // <time>
+  $timing-function: ease,     // ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)
+  $delay: 0.2s,               // <time>
+  $iteration-count: 1,        // infinite | number
+  $direction: normal,         // normal | alternate
+  $prefix: false
+  ) {
+          
+  $value: $name $duration $timing-function $delay $iteration-count $direction;
+
+  @if $prefix {
+    @include declaration(animation, $value, $prefix);
+  } @else {
+    @include experimental(animation, $value);
+  }
+
+}

data/stylesheets/css3/_backface-visibility.scss

@@ -0,0 +1,14 @@
+// animation-delay - http://www.w3.org/TR/css3-animations/#the-animation-delay-property-
+@mixin backface-visibility(
+  $value: visible,
+  $prefix: false
+  ) {
+
+  // <time>
+  @if $prefix {
+    @include declaration(backface-visibility, $value, $prefix);
+  } @else {
+    @include experimental(backface-visibility, $value);
+  }
+
+}

data/stylesheets/css3/_transform.scss

@@ -0,0 +1,27 @@
+// transform - https://developer.mozilla.org/en/CSS/transform
+// none | <transform-function>
+
+@mixin transform($value: none, $prefix: false) {
+
+  @if $prefix {
+    @include declaration(transform, $value, $prefix);
+  } @else {
+    @include experimental(transform, $value);
+  }
+
+}
+
+// transform-origin - https://developer.mozilla.org/en/CSS/transform-origin
+// x-axis - left | center | right  | length | %
+// y-axis - top  | center | bottom | length | %
+// z-axis -                          length
+
+@mixin transform-origin($value: 50%, $prefix: false) {
+
+  @if $prefix {
+    @include declaration(transform-origin, $value, $prefix);
+  } @else {
+    @include experimental(transform-origin, $value);
+  }
+
+}

data/stylesheets/css3/animation/_animation-delay.scss

@@ -0,0 +1,18 @@
+// animation-delay - http://www.w3.org/TR/css3-animations/#the-animation-delay-property-
+@mixin animation-delay(
+  $time-1: 0,
+  $time-2: false, $time-3: false, $time-4: false, $time-5: false, $time-6: false, $time-7: false, $time-8: false, $time-9: false,
+  $prefix: false
+  ) {
+
+  $full: compact($time-1, $time-2, $time-3, $time-4, $time-5, $time-6, $time-7, $time-8, $time-9);
+  $value: $full;
+
+  // <time>
+  @if $prefix {
+    @include declaration(animation-delay, $value, $prefix);
+  } @else {
+    @include experimental(animation-delay, $value);
+  }
+
+}

data/stylesheets/css3/animation/_animation-direction.scss

@@ -0,0 +1,18 @@
+// animation-direction - http://www.w3.org/TR/css3-animations/#the-animation-direction-property-
+@mixin animation-direction(
+  $direction-1: normal,
+  $direction-2: false, $direction-3: false, $direction-4: false, $direction-5: false, $direction-6: false, $direction-7: false, $direction-8: false, $direction-9: false,
+  $prefix: false
+  ) {
+
+  $full: compact($direction-1, $direction-2, $direction-3, $direction-4, $direction-5, $direction-6, $direction-7, $direction-8, $direction-9);
+  $value: $full;
+
+  // normal | alternate
+  @if $prefix {
+    @include declaration(animation-direction, $value, $prefix);
+  } @else {
+    @include experimental(animation-direction, $value);
+  }
+
+}

data/stylesheets/css3/animation/_animation-duration.scss

@@ -0,0 +1,17 @@
+// animation-duration - http://www.w3.org/TR/css3-animations/#the-animation-duration-property-
+@mixin animation-duration(
+  $time-1: 0,
+  $time-2: false, $time-3: false, $time-4: false, $time-5: false, $time-6: false, $time-7: false, $time-8: false, $time-9: false,
+  $prefix: false
+  ) {
+
+  $full: compact($time-1, $time-2, $time-3, $time-4, $time-5, $time-6, $time-7, $time-8, $time-9);
+  $value: $full;
+
+  // <time>
+  @if $prefix {
+    @include declaration(animation-duration, $value, $prefix);
+  } @else {
+    @include experimental(animation-duration, $value);
+  }
+}

data/stylesheets/css3/animation/_animation-fill-mode.scss

@@ -0,0 +1,18 @@
+// animation-fill-mode - http://dev.w3.org/csswg/css3-animations/#the-animation-fill-mode-property-
+@mixin animation-fill-mode(
+  $mode-1: none,
+  $mode-2: false, $mode-3: false, $mode-4: false, $mode-5: false, $mode-6: false, $mode-7: false, $mode-8: false, $mode-9: false,
+  $prefix: false
+  ) {
+
+  $full: compact($mode-1, $mode-2, $mode-3, $mode-4, $mode-5, $mode-6, $mode-7, $mode-8, $mode-9);
+  $value: $full;
+
+  // none | forwards | backwards | both
+  @if $prefix {
+    @include declaration(animation-fill-mode, $value, $prefix);
+  } @else {
+    @include experimental(animation-fill-mode, $value);
+  }
+
+}

data/stylesheets/css3/animation/_animation-iteration-count.scss

@@ -0,0 +1,18 @@
+// animation-iteration-count - http://www.w3.org/TR/css3-animations/#the-animation-iteration-count-property-
+@mixin animation-iteration-count(
+  $value-1: 1,
+  $value-2: false, $value-3: false, $value-4: false, $value-5: false, $value-6: false, $value-7: false, $value-8: false, $value-9: false,
+  $prefix: false
+  ) {
+
+  $full: compact($value-1, $value-2, $value-3, $value-4, $value-5, $value-6, $value-7, $value-8, $value-9);
+  $value: $full;
+
+  // infinite | <number>
+  @if $prefix {
+    @include declaration(animation-iteration-count, $value, $prefix);
+  } @else {
+    @include experimental(animation-iteration-count, $value);
+  }
+
+}

data/stylesheets/css3/animation/_animation-name.scss

@@ -0,0 +1,18 @@
+// animation-name - http://www.w3.org/TR/css3-animations/#the-animation-name-property-
+@mixin animation-name(
+  $name-1,
+  $name-2: false, $name-3: false, $name-4: false, $name-5: false, $name-6: false, $name-7: false, $name-8: false, $name-9: false,
+  $prefix: false
+  ) {
+
+  $full: compact($name-1, $name-2, $name-3, $name-4, $name-5, $name-6, $name-7, $name-8, $name-9);
+  $value: $full;
+
+  // none | animation-name
+  @if $prefix {
+    @include declaration(animation-name, $value, $prefix);
+  } @else {
+    @include experimental(animation-name, $value);
+  }
+          
+}

data/stylesheets/css3/animation/_animation-play-state.scss

@@ -0,0 +1,18 @@
+// animation-play-state - http://www.w3.org/TR/css3-animations/#the-animation-play-state-property-
+@mixin animation-play-state(
+  $state-1: running,
+  $state-2: false, $state-3: false, $state-4: false, $state-5: false, $state-6: false, $state-7: false, $state-8: false, $state-9: false,
+  $prefix: false
+  ) {
+
+  $full: compact($state-1, $state-2, $state-3, $state-4, $state-5, $state-6, $state-7, $state-8, $state-9);
+  $value: $full;
+
+  // running | paused
+  @if $prefix {
+    @include declaration(animation-play-state, $value, $prefix);
+  } @else {
+    @include experimental(animation-play-state, $value);
+  }
+
+}