Taking steps() with CSS animations

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.

JSFiddle demo.

Which then inspired @simurai to use the steps() feature to create a sprite animation.

JS Fiddle demo.

Especially the latter is very interesting as it allows for a scripted animation without JavaScript – remember when you had to re-animate GIFs in Photoshop and re-optimise them every time a client wanted them faster or slower?

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!

More articles by Chris Heilmann…


  1. Style Thing

    Great news for mobile web devs! And another opportunity for desktop web devs to make animations.

    September 9th, 2011 at 22:37

  2. simonleung

    To make your CSS easy to read, you can do it like this:

    keyframes wink {
    from { background-position: 0px; }
    to { background-position: -500px; }

    var ss=document.getElementById(‘CSS3’).firstChild;
    var re=/transition|transform|animation|keyframes/g;
    var userAgent=window.navigator.userAgent;
    var prefix=””;
    if (userAgent.indexOf(“Firefox”)>=0) {
    } else if (userAgent.indexOf(“WebKit”)>=0)
    ss.data=ss.data.replace(re,function(s){return prefix+s});

    September 11th, 2011 at 08:23

  3. Gaurav Mishra

    Inspiration is cross pollinating -Marian Bantjes
    Remembering the words

    September 12th, 2011 at 22:17

Comments are closed for this article.