LearnCSS Sprite Sheet Animations with steps()

Guil Hernandez
writes on July 14, 2014

Share with your friends


There’s a little-known timing function in CSS animations that lets us break an animation into segments––or steps––instead of running it as one continuous animation from start to finish. This function is useful for creating sprite sheet animations because we’re able to precisely display each sprite image as a frame without any easing effects inbetween.

Animating with the steps() function

With steps() we’re able to control the amount of keyframes rendered in an animation’s duration; it progresses the animation in equidistant steps based on the value we set. Knowing this, let’s use steps() to create a simple character sprite sheet animation.

I used Illustrator artboards to create each animation frame as a separate 190×240 image, then took advantage of Compass’ spriting feature to quickly generate a horizontal sprite sheet containing all the exported images.

The animation sprite sheet

The final animation sprite sheet

Creating the animation

To animate our monster character, we’ll first create a rule where we define the width and height dimensions and display the main sprite sheet as a background image.

.monster {
  width: 190px;
  height: 240px;
  background: url('monster-sprite.png') left center;

Next, we need to create a keyframe rule that animates the background position of the sprite sheet. The sprite sheet’s total width is 1900px, so let’s animate it right-to-left by giving it a final background position of -1900px.

@keyframes play {
   100% { background-position: -1900px; }

Running the animation

At this point, when we bind the play animation sequence to the .monster selector with a duration of .8s, we see the background position of our sprite sheet quickly animating from left to right.

.monster {
  animation: play .8s;

To achieve the desired frame-by-frame animation effect, we’ll need to include the steps() timing function in the animation value. Since the sprite sheet contains 10 image sprites, we can say that it’s made up of 10 frames––or steps. So let’s define 10 steps in our animation sequence:

.monster {
  animation: play .8s steps(10);

So now, the animation will run 10 frames in its .8s duration – it uses the background position animation to run through each sprite image as a step.

Finally, if we set animation-iteration-count to infinite, it will render a repeating loop of the animation.

.monster {
  animation: play .8s steps(10) infinite;

To change the speed of the animation, simply change the animation-duration value. Here’s the final sprite sheet animation sequence posted on CodePen:

See the Pen CSS Animation with steps() by Guil H (@Guilh) on CodePen.

Show us what you can create with steps() in the comments section. Or start learning CSS on Treehouse today!

18 Responses to “CSS Sprite Sheet Animations with steps()”

  1. Great writeup, Guil! I’ve not used steps() with sprite sheets yet, but looking at your approach, wouldn’t it be possible to us the alternate animation-direction property to cut your sprite sheet down a bit? That way it will start at 0% and go to 100% as usual, but then start at 100% and return to 0% (and continue repeating), and you wouldn’t need the last three sprite images in your sheet. Thoughts?

    • Thanks for reading, Derek. Sure, you can alternate the animation direction to get the reverse motion. I just made reverse frames slightly different to liven up the animation. :)

  2. Way cool! Some very valid points! I appreciate you writing this
    article and the rest of the website is really good.

    Feel free to surf to my web site – interesting

  3. What’s the advantage of this over a GIF?
    I figure a gif may be a little larger in size, maybe? But this seems like more work than creating a gif (this coming from someone who’s never made a gif).

    • Guil Hernandez on July 15, 2014 at 8:22 pm said:

      Gifs are fine, too. This method gives you instant control over animation speed and direction. Thanks for reading!

      • Does the sprite works with .svg ? So for king size animation, sprite would be lighter than GIF, isnt-it ?

        Many thanks for this tuto :)

  4. This is a great tutorial, Thanks Guil for providing this tutorial, honestly speaking this really helps me.

  5. Rocky Biloba on July 23, 2014 at 1:43 pm said:

    Hm, when I try it, it doesn’t seem to work…

    See the Pen obKfj by Rocky Biloba (@Rocky-Biloba) on CodePen.

  6. I’m currently building a large array of sprite animations, using steps() looks like it could be very useful, but the downfall i’m finding is that your sprite sheet has to be completely horizontal.

    I like to keep all animations for a particular character or object on one sprite sheet so they’re collectively together, but it means images have to be 50,000px wide to use Steps.

    Has anyone figured a way of doing this with verticals and horizontals?

    • You can work this vertically too to have multidimensional sprite sheets.

      Rather than using “center” in the background position declaration, use “top” and “bottom” if you have two rows, or just “spriteHeight * rowNumber” to target a specific row. You will have to change your animation CSS if you have varying step counts, but that can be as simple to apply as an overriding class change.

  7. Carmen González on August 25, 2015 at 1:21 pm said:

    One quiestion, how can I make it stop in the last frame?

  8. kindly guide me how yo display different images animation in css

  9. thanks, very good tutorial , but it did not work with me, I’m new to css .
    I had to add : div.monster . the DIV , fixed it .

  10. It would be so nice to have this tutorial but with different rows, instead of doing it in one, I don’t know how to do it, thanxs!

  11. When I tried adding this to my site for testing purposes (I’m a little new to my framework I’m using and wasn’t sure how it would behave) it started saying I had malware on the page…anybody else have any issues like this?

  12. 高品質2015シャネル スーパーコピー激安專門店弊社は海外大好評を博くシャネル コピー激安老舗です,2015高品質シャネル バッグ コピー,シャネル 靴 コピー,シャネル 財布 コピー品の品質はよくて、激安の大特価でご提供します。
    スーパーコピー商品、ブランドコピ ー財布、偽物バッグコピー財布コピーN 級品、ブ ランドスーパーコピー商 品、グッチ財布コピー,ミュウミュウ 財布激安。ブランドスーパーコ ピー銀座、ランドスーパーコピー財布。ブラ ンドスーパーコピー代引き、ブランドスーパーコピー専門店、ご購入する度、ご安心とご満足の届けることを旨にしておりますよろしくお願いします ありがとうございます http://www.okakaku.com/brand-47-copy-0.html

Leave a Reply

Learning to code can be fun!

Get started today with a free trial and discover why thousands of students are choosing Treehouse to learn about web development, design, and business.

Learn more