CSS animations are hot and a lot of experimentation is going on. A cool new feature of animations is the steps() option which allows you to cut an animation into steps instead of a transition from one state to another in one go. While this seems counterproductive on first glance there is a lot you can do with it.
Inspired by the making the perfect listing web site Lea Verou created a Pure CSS3 typing animation.
Which then inspired @simurai to use the steps() feature to create a sprite animation.
For now the steps only divide the full length of the animation up. If you want different timings for different steps you still will need to create keyframes for each. Right now the steps feature works in Firefox and Webkit. Let’s hope others will follow, too.
About Chris Heilmann
Evangelist for HTML5 and open web. Let's fix this!