SCSS mixin instead of `steps()` timing function. some old Android browsers not supported steps() timing function.

step-frames.scss

@mixin step-frames($steps, $fromX, $fromY, $toX, $toY){
  $i: 0;
  $frame: 0;
  @while $frame < 100 {
    @if $frame > 0{
      #{$frame - 0.00001}% {
        background-position: #{($toX - $fromX) / $steps * ($i - 1)}px #{($toY - $fromY) / $steps * ($i - 1)}px;
      }
    }

    #{$frame}% {
      background-position: #{($toX - $fromX) / $steps * $i}px #{($toY - $fromY) / $steps * $i}px;
    }

    $i: $i + 1;
    $frame: $frame + 100 / $steps
  }
}

useage.scss

.animate {
  @include animation(anim 3s 1);
}
@include keyframes(anim){
  @include step-frames(24, 0, 0, 0, -2785);
}

// above SCSS code is instead of ...
.animate {
  @include animation(anim 3s steps(24));
}
@include keyframes(anim){
  0% {
    background-position: 0 0;
  }
  100%{
    background-position: 0 -2785px;
  }
}