Sass mixin that emulates a CSS3 steps()
animation function that works in earlier IE.CSS3 steps()
function only works with >IE10 http://caniuse.com/css-animation
@mixin keyframesteps($name, $steps, $startx, $endx) {
@keyframes #{$name}
{
@for $i from 0 through $steps {
$diff: ($endx - $startx) / $steps;
#{($i/$steps*100)}% {
$x: ($i * $diff) + $startx;
background-position: $x 0;
}
}
}
}
/**
* # Usage:
*/
@include keyframesteps(test, 4, 0px, -1080px);
/**
* # Will output to:
@keyframes test {
0% {
background-position: 0px 0;
}
25% {
background-position: -270px 0;
}
50% {
background-position: -540px 0;
}
75% {
background-position: -810px 0;
}
100% {
background-position: -1080px 0;
}
}
*
*/