css output.css

@-webkit-keyframes main-bear {
  from {
    background-position: 0px 0px; }

  to {
    background-position: 0px -11550px; } }

@-moz-keyframes main-bear {
  from {
    background-position: 0px 0px; }

  to {
    background-position: 0px -11550px; } }

@-ms-keyframes main-bear {
  from {
    background-position: 0px 0px; }

  to {
    background-position: 0px -11550px; } }

@keyframes main-bear {
  from {
    background-position: 0px 0px; }

  to {
    background-position: 0px -11550px; } }

@-webkit-keyframes about-bear {
  from {
    background-position: 0px 0px; }

  to {
    background-position: 0px -15000px; } }

@-moz-keyframes about-bear {
  from {
    background-position: 0px 0px; }

  to {
    background-position: 0px -15000px; } }

@-ms-keyframes about-bear {
  from {
    background-position: 0px 0px; }

  to {
    background-position: 0px -15000px; } }

@keyframes about-bear {
  from {
    background-position: 0px 0px; }

  to {
    background-position: 0px -15000px; } }

@-webkit-keyframes schedule-bear {
  from {
    background-position: 0px 0px; }

  to {
    background-position: 0px -12500px; } }

@-moz-keyframes schedule-bear {
  from {
    background-position: 0px 0px; }

  to {
    background-position: 0px -12500px; } }

@-ms-keyframes schedule-bear {
  from {
    background-position: 0px 0px; }

  to {
    background-position: 0px -12500px; } }

@keyframes schedule-bear {
  from {
    background-position: 0px 0px; }

  to {
    background-position: 0px -12500px; } }

@-webkit-keyframes register-bear {
  from {
    background-position: 0px 0px; }

  to {
    background-position: 0px -13500px; } }

@-moz-keyframes register-bear {
  from {
    background-position: 0px 0px; }

  to {
    background-position: 0px -13500px; } }

@-ms-keyframes register-bear {
  from {
    background-position: 0px 0px; }

  to {
    background-position: 0px -13500px; } }

@keyframes register-bear {
  from {
    background-position: 0px 0px; }

  to {
    background-position: 0px -13500px; } }

@-webkit-keyframes sponsors-bear {
  from {
    background-position: 0px 0px; }

  to {
    background-position: 0px -10800px; } }

@-moz-keyframes sponsors-bear {
  from {
    background-position: 0px 0px; }

  to {
    background-position: 0px -10800px; } }

@-ms-keyframes sponsors-bear {
  from {
    background-position: 0px 0px; }

  to {
    background-position: 0px -10800px; } }

@keyframes sponsors-bear {
  from {
    background-position: 0px 0px; }

  to {
    background-position: 0px -10800px; } }

.main-bear {
  background-image: url(/img/page-main-bear-sprite.png);
  width: 424px;
  height: 550px;
  -webkit-animation: main-bear 1s steps(21) infinite;
  -moz-animation: main-bear 1s steps(21) infinite;
  -ms-animation: main-bear 1s steps(21) infinite;
  -o-animation: main-bear 1s steps(21) infinite;
  animation: main-bear 1s steps(21) infinite; }

sass animation mixins.scss

@mixin steps($name, $frames) {
  -webkit-animation: #{$name} 1s steps($frames) infinite;
     -moz-animation: #{$name} 1s steps($frames) infinite;
      -ms-animation: #{$name} 1s steps($frames) infinite;
       -o-animation: #{$name} 1s steps($frames) infinite;
          animation: #{$name} 1s steps($frames) infinite;  
}

/* creates named keyframe animations per browser prefix */
@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content; 
  }
  @-moz-keyframes #{$name} {
    @content;
  }
  @-ms-keyframes #{$name} {
    @content;
  }
  @keyframes #{$name} {
    @content;
  } 
}

/* Generates all browser prefixes for a named animation with a start background position for the first frame of a sprite to the last frame of a sprite */
@mixin play($name, $height) {
  @include keyframes($name) {
    from { background-position: 0px 0px; }
      to { background-position: 0px -#{$height}; }  
  }
}

/* Actually includes the named animations in the css */
@include play(main-bear, 11550px);
@include play(about-bear, 15000px);
@include play(schedule-bear, 12500px);
@include play(register-bear, 13500px);
@include play(sponsors-bear, 10800px); 

.main-bear {
  background-image: url(/img/page-main-bear-sprite.png);
  width: 424px;
  height: 550px;
  
  @include steps(main-bear, 21); // creates a css transition of the named animation with the number of frames in the sprite.
}