A simple tutorial to create Classic Spritesheet animations with CSS3 keyframe animation property.

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 as Classic or Spritesheet animation. In this technique, the animation is created by playing a sprite that contains several states of that particular sequence.

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.

CSS Spritesheet Animation

Basic idea of this tutorial

In general, we need three important things to implement spritesheeet 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 div element 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 CSS3 keyframes as the technology to play my sequence.


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

<div class="viewport"></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 (12 in this example)
  2. What’s the width and height of each state in it (mine ~ 399x200px)
  3. Is the sprite horizontal or vertical (mine is vertical)

To determine the steps, 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 dimensions of each state of the sprite should be equal, or else we’ll end up in a jerky or meaningless animation.

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.


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.

.viewport {
  width: 399px;   /* Viewport Width */
  height: 12.46em;   /* Viewport Height (~ 199.42px) */
  margin: 2em auto;   /* Little margin */
  background: transparent url('sprite.png') 0 0 no-repeat;   /* Our sprite as viewport background */
  animation: catwalk 1s steps(12) infinite; /* The Animation */

@keyframes catwalk {
  100% { background-position: 0 -2393px; }

The first thing to notice 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).

I’ve used steps() attribute here, that will play our animation in equidistant steps according to the height/width of the states.

That’s it. Check out the demonstration.

The Demo


  • 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.

Do let me know your thoughts on this. Thanks :)