SCSS: Animate Sprite Background Using CSS

gistfile1

/* HTML

<div class="animation"></div>

*/


/*-- Keyframes & Animation Mixins --*/
@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content; 
  }
  @-moz-keyframes #{$name} {
    @content;
  }
  @-o-keyframes #{name} {
    @content;
  }
  @-ms-keyframes #{$name} {
    @content;
  }
  @keyframes #{$name} {
    @content;
  } 
}

@mixin animation($content) {
  -webkit-animation: $content;
     -moz-animation: $content;
      -ms-animation: $content;
       -o-animation: $content;
          animation: $content;
}


/*-- Construct Animation --*/
@include keyframes(animate-background) {
  from { background-position:    0px; }
    // length of sprite
    to { background-position: -500px; }
}


/* Apply Mixins & constructed animation to DOM node */
.animation {
  // Dimensions of each slide
  width: 100px;
  height: 100px;

  // sprite location
  background-image: url("http://files.simurai.com/misc/sprite.png");
  
  // attach animation - time of animation, # of slides, # of times to run
  @include animation(animate-background .8s steps(10) infinite);
}