Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Added mixin for CSS3 animations

  • Loading branch information...
commit 1a8b098ad794fdfc3f2ad9089a1b32c9904498eb 1 parent 5f290c5
Phil LaPier authored
Showing with 134 additions and 0 deletions.
  1. +134 −0 _animation.scss
View
134 _animation.scss
@@ -0,0 +1,134 @@
+// http://www.w3.org/TR/css3-animations/#the-animation-name-property-
+// Each of the three following properties supports a comma separated list 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. animation-name | animation-duration | animation-timing-function
+
+@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)
+ {
+ $full: $name-1;
+ @each $name in
+ $name-2, $name-3,
+ $name-4, $name-5,
+ $name-6, $name-7,
+ $name-8, $name-9{
+ @if $name {
+ $full: $full, $name;
+ }
+ }
+ -webkit-animation-name: $full;
+ -moz-animation-name: $full;
+ animation-name: $full;
+}
+
+@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)
+ {
+ $full: $time-1;
+ @each $time in
+ $time-2, $time-3,
+ $time-4, $time-5,
+ $time-6, $time-7,
+ $time-8, $time-9{
+ @if $time {
+ $full: $full, $time;
+ }
+ }
+ -webkit-animation-duration: $full;
+ -moz-animation-duration: $full;
+ animation-duration: $full;
+}
+
+@mixin animation-timing-function ($motion-1: ease,
+// ease | linear | ease-in | ease-out | ease-in-out
+ $motion-2: false, $motion-3: false,
+ $motion-4: false, $motion-5: false,
+ $motion-6: false, $motion-7: false,
+ $motion-8: false, $motion-9: false)
+ {
+ $full: $motion-1;
+ @each $motion in
+ $motion-2, $motion-3,
+ $motion-4, $motion-5,
+ $motion-6, $motion-7,
+ $motion-8, $motion-9{
+ @if $motion {
+ $full: $full, $motion;
+ }
+ }
+ -webkit-animation-timing-function: $full;
+ -moz-animation-timing-function: $full;
+ animation-timing-function: $full;
+}
+
+@mixin animation-iteration-count ($integer: 1) {
+// infinite | <number>
+ -webkit-animation-iteration-count: $integer;
+ -moz-animation-iteration-count: $integer;
+ animation-iteration-count: $integer;
+}
+
+@mixin animation-direction ($direction: normal) {
+// normal | alternate
+ -webkit-animation-direction: $direction;
+ -moz-animation-direction: $direction;
+ animation-direction: $direction;
+}
+
+@mixin animation-play-state ($state: running) {
+// running | paused
+ -webkit-animation-play-state: $state;
+ -moz-animation-play-state: $state;
+ animation-play-state: $state;
+}
+
+@mixin animation-delay ($time: 0) {
+ -webkit-animation-delay: $time;
+ -moz-animation-delay: $time;
+ animation-delay: $time;
+}
+
+@mixin animation-fill-mode ($mode: none) {
+// http://goo.gl/l6ckm
+// none | forwards | backwards | both
+ -webkit-animation-fill-mode: $mode;
+ -moz-animation-fill-mode: $mode;
+ animation-fill-mode: $mode;
+}
+
+// Shorthand for a basic animation. Supports multiple parenthesis-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.
+@mixin animation ($name, $duration, $timing-function, $delay, $iteration-count, $direction) {
+ -webkit-animation: $name $duration $timing-function $delay $iteration-count $direction;
+ -moz-animation: $name $duration $timing-function $delay $iteration-count $direction;
+ animation: $name $duration $timing-function $delay $iteration-count $direction;
+}
Please sign in to comment.
Something went wrong with that request. Please try again.