<hpcodecraft> release the kraken!

CSS sprite animation

Experiment in creating a simple walking animation with CSS, e.g. for games

view source

Sprite animation CSS

#animation {
  position: relative;
  width: 100px;
  height: 100px;
  background: url(sprite.png) 0px 0px no-repeat;

  /*
    animation-timing-function: steps( 4 ) does the trick here
    it splits the animation into 4 frames and shows them
    sequentially without any tweening, horray!
  */

  -webkit-animation-name: walk;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: steps( 4 );

  -moz-animation-name: walk;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: steps( 4 );

  -ms-animation-name: walk;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: steps( 4 );

  -o-animation-name: walk;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: steps( 4 );

  animation-name: walk;
  animation-iteration-count: infinite;
  animation-timing-function: steps( 4 );
}

.slow {
  -webkit-animation-duration: 1s;
     -moz-animation-duration: 1s;
      -ms-animation-duration: 1s;
       -o-animation-duration: 1s;
          animation-duration: 1s;
}

.medium {
  -webkit-animation-duration: .5s;
     -moz-animation-duration: .5s;
      -ms-animation-duration: .5s;
       -o-animation-duration: .5s;
          animation-duration: .5s;
}

.fast {
  -webkit-animation-duration: 250ms;
     -moz-animation-duration: 250ms;
      -ms-animation-duration: 250ms;
       -o-animation-duration: 250ms;
          animation-duration: 250ms;
}

.paused {
  -webkit-animation-play-state: paused;
     -moz-animation-play-state: paused;
      -ms-animation-play-state: paused;
       -o-animation-play-state: paused;
          animation-play-state: paused;
}

@-webkit-keyframes walk {
  from { background-position: 0px 0px; }
  to { background-position: -400px 0px; }
}

@-moz-keyframes walk {
  from { background-position: 0px 0px; }
  to { background-position: -400px 0px; }
}

@-ms-keyframes walk {
  from { background-position: 0px 0px; }
  to { background-position: -400px 0px; }
}

@-o-keyframes walk {
  from { background-position: 0px 0px; }
  to { background-position: -400px 0px; }
}

@keyframes walk {
  from { background-position: 0px 0px; }
  to { background-position: -400px 0px; }
}

Speed adjustment and pause/play JS

var slider = document.getElementById('animation-speed');
var speed = 'medium';
var paused = false;

slider.onchange = function() {
  switch( +this.value ) {
    case 1: speed = 'slow'; break;
    case 3: speed = 'fast'; break;
    default: speed = 'medium'; break;
  }
  document.getElementById('animation').className = speed;
  document.getElementById('animation-pause').innerHTML = 'pause';
  paused = false;
}

document.getElementById('animation-pause').onclick = function() {
  if( paused ) {
    document.getElementById('animation').className = speed;
    this.innerHTML = 'pause';
    paused = false;
  }
  else {
    document.getElementById('animation').className = speed + ' paused';
    this.innerHTML = 'play';
    paused = true;
  }
}