sprite sheet animation (CSS only)

using animation steps and prepared sheet; customizable

by Ercan Cicek

HTML

<div id="spriteSheet"></div>
<div id="yoshi"></div>

SCSS

$divH: 75px; /* customizable in px */
$divW: $divH * 1.5; /* do not change this */
$endPos: $divW * 25 * -1; /* do not change this */

div#spriteSheet {
  width: 100%;
  height: 75px;
  background-image: url('http://www.bilderload.com/daten/ergebnis0IQ05.png');
  background-repeat: no-repeat;
}

div#yoshi {
  width: $divW;
  height: $divH;
  background-image: url('http://www.bilderload.com/daten/ergebnis0IQ05.png');
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: auto $divH;
  -webkit-animation: moveYoshi 4s steps(25) 1;  
  animation: moveYoshi 4s steps(25) 1;
  animation-fill-mode: forwards;

}

@-webkit-keyframes moveYoshi {
  from {
    background-position: 0;
  }
  to {
    background-position: $endPos;
  }
}

@keyframes moveYoshi {
  from {
    background-position: 0;
  }
  to {
    background-position: $endPos;
  }
}