All of us have seen traditional animation in action since our childhood in form of animated movies and 2d video games. In this type of animation, a sequence of separate frames drawn by artists is played to create the animation.

Similar form of animation has been used in the gaming industry for a long time. The gaming people call it classic or spritesheet animation. In this technique, the animation is created by playing a sprite that contains several states of that particular sequence.

CSS Spritesheet Animation
The walking cat: sprite animation using CSS

Intriguing, isn’t it?

In this post, I’m gonna share with you how you can create spritesheet animations in CSS. You may see the demo first if you want to.

Basic idea of CSS Sprite Animation

In general, we need three important things to implement the sprite animation:

  1. Animation viewport to display our sequence
  2. A sprite containing the different states of the sequence
  3. The technology to play the sprite as animation

What I’m gonna use?

I’m using an HTML division element (<div>) to create the viewport for our animation sequence. For the sprite, I’ve used this cat sprite that I got from the Internet.

Lastly, I’ll make use of CSS keyframes as the technology to play my sequence.

HTML

The markup is pretty simple–just one single div that represents our animation viewport.

<div id="cat"></div>

The Simple Math

Before going any further, you should know the following things about your sprite image:

  1. How many steps (states or stages) it carries. We have 12 in this example.
  2. What’s the width and height of each state in it. We have 399x200px for each state here.
  3. Is the sprite horizontal or vertical. Ours is vertical.

Determining the steps, dimensions, and nature of the spritesheet

Simply count the different states your sprite image carries. Be aware of the height and width of each step, as it will decide the size of our viewport.

Also make sure that the dimensions of each state of the sprite should be equal, or else we’ll end up in a jerky or less meaningful animation. This is important because the sequence should not be disturbed when the animation plays it.

If the states in your sprite are aligned one besides the other, it’s horizontal. If they are aligned one below the other, it’s vertical. Try to avoid the hybrid sprites (vertical + horizontal), as they complicate things.

CSS

After determining different key things about my sprite, I wrote the below CSS that carries my viewport styles and the animation part that is to be played in that viewport (#cat).

#cat {
  width: 399px;   /* Viewport-width */
  height: 200px;   /* Viewport-height */
  margin: 2em auto;   /* Little margin */
  background: transparent url('/path/to/sprite.png') 0 0 no-repeat;   /* Our sprite as the viewport background */
  animation: catwalk 1s steps(12) infinite; /* The Animation */
}

/* Animation keyframes for the sprite */
@keyframes catwalk {
  100% { background-position: 0 -2393px; }
}

The first most noteworthy thing in the above CSS is that I’ve used our sprite image as the background image of our viewport. The catwalk animation animates our background in 12 steps till the vertical background-position reaches its end (-2393px).

Second thing to note is the steps() attribute used above, which actually plays our animation in equidistant steps according to the height/width of the states.

That’s it. Check out the demonstration.

Live Demo of CSS Sprite Animation

Notes

  • If you’re using a horizontal sprite, you should animate it horizontally. For example, if I had used a horizontal sprite here, I would have declared the keyframe animation like this:
    @keyframes catwalk {
      100% { background-position: -2393px 0; }
    }
  • If our sprite is vertical, the step() considers state’s height to play the animation. If it is horizontal, step() focuses on the width of the state.

That’s all folks. Do let me know your thoughts on this. Cheers!