Create a sprite sheet walk cycle using using CSS animation

January 13th, 2013

The CSS steps() function is something that I think is going to be really useful in the future when it’s supported in all the browsers. One thing I’m a big fan of is using CSS to move and redraw DOM objects instead of using JavaScript when I can and steps() is one of those things that allows me to do that. It used to be if you wanted to make a frame by frame animation on an HTML page, you had to use an animated gif or use JavaScript or jQuery to cycle through it and now you can use steps() to use CSS to animate it.

But there’s a bunch of examples out there that show a static animation. I wanted to see if it can be used for something more complicated. A while ago, I made a walk cycle for the canvas tag and I wondered how difficult it would be to recreate that with steps(). Turns out it’s pretty simple.


1
 

The main functionality is that when the right arrow key is pressed then I use JavaScript to add the class walk-right which adds the walk-right sprite sheet and starts the animation. It also uses translate to move the character to the right. Stop pressing the key and I remove the walk-right class just leave the right class which leaves the character facing right. The same thing works for left arrow key.

When you think about it, that’s some pretty simple stuff right there to create an animated walk cycle. All the heavy work is done for us by CSS and browser and anytime you can leave the drawing and redrawing of the DOM up to CSS, it will be faster than using JavaScript.

Leave a Reply

Your email address will not be published. Required fields are marked *