spoike
5/19/2014 - 7:59 AM

Sass mixin that emulates a CSS3 `steps()` animation function that works in earlier IE.CSS3 `steps()` function only works with >IE10 http://c

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

keyframesteps.scss
content_copyfile_download
@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; 
  }
}
 *
 */