With few lines of css you can create stunning animations. Today we will use sprite css to animate a character. Sprite images collection is very useful because a very hard animation can be implemented very easy with just few lines of css. To see the animation please scroll to the bottom of the article and watch the video. Normally, an animation like this one if we don't use an image and sprite property it could takes hours in order to implement it.

Sprite CSS for animation

HTML structure:

<div id="animation">
    <div id="frame"></div>
  </div>

CSS:

#animation{
  display:inline-block;
  position:absolute;
  text-align: center;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}
#frame{
  width:50px;
  height:72px;
  border:1px solid transparent;
  background:url('../images/sprite-steps.png') no-repeat left top;
  animation:frame-animation 1s steps(10) infinite;
}
@-webkit-keyframes frame-animation{
  0%{
    background-position:0 0;
  }
  100%{
    background-position: -500px 0;
  }
}
@keyframes frame-animation{
  0%{
    background-position:0 0;
  }
  100%{
    background-position: -500px 0;
  }
}

As you can see we add thee image as background with left position 0, and top position 0. Then, in frame-animation we just move the background position from left 0 to left -550px. This is all you need to do in order to make this animation. You can use any image you want and just animate the background.