|
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ // |
|
// // |
|
// mixin: colorFader // |
|
// params: $animationName, $colorList // |
|
// $animationName: The name you want to give your animation // |
|
// $colorList: The list of colors you want to cycle through // |
|
// // |
|
// Divides 100% by the color count to get the $interval and // |
|
// increments the $frame by ($frame + $interval) // |
|
// // |
|
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ // |
|
|
|
@mixin colorFader($animationName, $colorList) { |
|
$colorCount: length($colorList); |
|
$interval: 100 / $colorCount; |
|
|
|
// Keeping this block here until @ interpolation is added |
|
// Open issue: https://github.com/sass/sass/issues/429 |
|
// Then, either pass the prefixes in, or use the below |
|
// $prefixes list |
|
// Until then, each vendor block will have to be written separately |
|
// |
|
//$at: @; |
|
//$prefixes: "", "-webkit-", "-moz-"; |
|
//@each $prefix in $prefixes { |
|
// #{$at}#{$prefix}keyframes #{$animationName} { |
|
// $frame: 0; |
|
// @each $color in $colorList { |
|
// #{$frame}% {background: $color;} |
|
// $frame: $frame + $interval; |
|
// } |
|
// } |
|
//} |
|
|
|
@keyframes #{$animationName} { |
|
$frame: 0; |
|
@each $color in $colorList { |
|
#{$frame}% {background: $color;} |
|
$frame: $frame + $interval; |
|
} |
|
} |
|
|
|
/* Safari */ |
|
@-webkit-keyframes #{$animationName} { |
|
$frame: 0; |
|
@each $color in $colorList { |
|
#{$frame}% {background: $color;} |
|
$frame: $frame + $interval; |
|
} |
|
} |
|
|
|
/* Firefox */ |
|
@-moz-keyframes #{$animationName} { |
|
$frame: 0; |
|
@each $color in $colorList { |
|
#{$frame}% {background: $color;} |
|
$frame: $frame + $interval; |
|
} |
|
} |
|
} |