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.


Comments are now closed.

  1. Style Thing wrote on September 9th, 2011 at 22:37:

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

  2. simonleung wrote on September 11th, 2011 at 08:23:

    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)
    prefix=”-webkit-“;,function(s){return prefix+s});

  3. Gaurav Mishra wrote on September 12th, 2011 at 22:17:

    Inspiration is cross pollinating -Marian Bantjes
    Remembering the words

Comments are closed for this article.