Animation steps example

by Anupama

HTML

<div class="tuna"></div>

CSS

.tuna {
  /* use the timing function steps() to chunk the animation into 12 equal pieces */
  background: url(http://stash.rachelnabors.com/animation-workshop/sprite_catwalk.png) 0 0 no-repeat; 
  height: 200px;
  width: 400px;
  margin: 100px auto 0;
  -webkit-animation: walk 1s steps(12) infinite;
  animation: walk 1s steps(12) infinite;
}
p {text-align: center;}
@keyframes walk{
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 0 -2400px;
    }
}
@-webkit-keyframes walk{
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 0 -2400px;
    }
}