Animating a sprite sheet with steps ()

If you don’t want to use gifs on the site, but prefer PNG for their better color, but still need to animate them, then here is the way:

CSS animations with key frames have a property called animation-timing-function . One of its features is to use the steps () function , as in the following example:

div {
    animation: play 1s steps(10) infinite;
}
@keyframes play { 
      0% { background-position:    0px 0; } 
    100% { background-position: -500px 0; }
}

The difference between it and the rest of the animation functions is that instead of a smooth movement from 0px to −500px there are sharp jumps with pauses between them. This is ideal for animations that use a sprite-frame sheet. In the above example, the step is 50px and the pause is 100 milliseconds (10 steps in total).

Here is a small demo .

As you can see, you can change the speedanimation playback, which is very pleasing, but there is a problem: the animation always starts from the first frame and therefore looks twitching. I also tried animating the duration of the animation (inheriting from the parent), but unfortunately this is not supported. So, I think if you need more dynamic speed control (animation of the animation), then you still have to resort to javascript.

P.S. A real use case for this trick is found: the Impending logo .