Permalink
Browse files

All Animations support multiple values

  • Loading branch information...
1 parent f568b1e commit c49a1100bf0a8d7347fe796ea4b4a13fc782d8d9 Phil LaPier committed Jun 27, 2011
Showing with 114 additions and 39 deletions.
  1. +114 −39 _animation.scss
View
153 _animation.scss
@@ -1,18 +1,17 @@
// 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
+// 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.
@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{
+ $full: $name-1;
+ $names: $name-2, $name-3, $name-4, $name-5,
+ $name-6, $name-7, $name-8, $name-9;
+
+ @each $name in $names {
@if $name {
$full: $full, $name;
}
@@ -22,18 +21,18 @@
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{
+ $full: $time-1;
+ $times: $time-2, $time-3, $time-4, $time-5,
+ $time-6, $time-7, $time-8, $time-9;
+
+ @each $time in $times {
@if $time {
$full: $full, $time;
}
@@ -43,19 +42,19 @@
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{
+ $full: $motion-1;
+ $motions: $motion-2, $motion-3, $motion-4, $motion-5,
+ $motion-6, $motion-7, $motion-8, $motion-9;
+
+ @each $motion in $motions {
@if $motion {
$full: $full, $motion;
}
@@ -65,41 +64,117 @@
animation-timing-function: $full;
}
-@mixin animation-iteration-count ($integer: 1) {
+
+@mixin animation-iteration-count ($value-1: 1,
// infinite | <number>
- -webkit-animation-iteration-count: $integer;
- -moz-animation-iteration-count: $integer;
- animation-iteration-count: $integer;
+ $value-2: false, $value-3: false,
+ $value-4: false, $value-5: false,
+ $value-6: false, $value-7: false,
+ $value-8: false, $value-9: false)
+ {
+ $full: $value-1;
+ $values: $value-2, $value-3, $value-4, $value-5,
+ $value-6, $value-7, $value-8, $value-9;
+
+ @each $value in $values {
+ @if $value {
+ $full: $full, $value;
+ }
+ }
+ -webkit-animation-iteration-count: $full;
+ -moz-animation-iteration-count: $full;
+ animation-iteration-count: $full;
}
-@mixin animation-direction ($direction: normal) {
+
+@mixin animation-direction ($direction-1: normal,
// normal | alternate
- -webkit-animation-direction: $direction;
- -moz-animation-direction: $direction;
- animation-direction: $direction;
+ $direction-2: false, $direction-3: false,
+ $direction-4: false, $direction-5: false,
+ $direction-6: false, $direction-7: false,
+ $direction-8: false, $direction-9: false)
+ {
+ $full: $direction-1;
+ $directions: $direction-2, $direction-3, $direction-4, $direction-5,
+ $direction-6, $direction-7, $direction-8, $direction-9;
+
+ @each $direction in $directions {
+ @if $direction {
+ $full: $full, $direction;
+ }
+ }
+ -webkit-animation-direction: $full;
+ -moz-animation-direction: $full;
+ animation-direction: $full;
}
-@mixin animation-play-state ($state: running) {
+
+@mixin animation-play-state ($state-1: running,
// running | paused
- -webkit-animation-play-state: $state;
- -moz-animation-play-state: $state;
- animation-play-state: $state;
+ $state-2: false, $state-3: false,
+ $state-4: false, $state-5: false,
+ $state-6: false, $state-7: false,
+ $state-8: false, $state-9: false)
+ {
+ $full: $state-1;
+ $states: $state-2, $state-3, $state-4, $state-5,
+ $state-6, $state-7, $state-8, $state-9;
+
+ @each $state in $states {
+ @if $state {
+ $full: $full, $state;
+ }
+ }
+ -webkit-animation-play-state: $full;
+ -moz-animation-play-state: $full;
+ animation-play-state: $full;
}
-@mixin animation-delay ($time: 0) {
- -webkit-animation-delay: $time;
- -moz-animation-delay: $time;
- animation-delay: $time;
+
+@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)
+ {
+ $full: $time-1;
+ $times: $time-2, $time-3, $time-4, $time-5,
+ $time-6, $time-7, $time-8, $time-9;
+
+ @each $time in $times {
+ @if $time {
+ $full: $full, $time;
+ }
+ }
+ -webkit-animation-delay: $full;
+ -moz-animation-delay: $full;
+ animation-delay: $full;
}
-@mixin animation-fill-mode ($mode: none) {
+
+@mixin animation-fill-mode ($mode-1: none,
// http://goo.gl/l6ckm
// none | forwards | backwards | both
- -webkit-animation-fill-mode: $mode;
- -moz-animation-fill-mode: $mode;
- animation-fill-mode: $mode;
+ $mode-2: false, $mode-3: false,
+ $mode-4: false, $mode-5: false,
+ $mode-6: false, $mode-7: false,
+ $mode-8: false, $mode-9: false)
+ {
+ $full: $mode-1;
+ $modes: $mode-2, $mode-3, $mode-4, $mode-5,
+ $mode-6, $mode-7, $mode-8, $mode-9;
+
+ @each $mode in $modes {
+ @if $mode {
+ $full: $full, $mode;
+ }
+ }
+ -webkit-animation-fill-mode: $full;
+ -moz-animation-fill-mode: $full;
+ animation-fill-mode: $full;
}
+
// 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) {

0 comments on commit c49a110

Please sign in to comment.