Animation of a sheet with sprites using steps ()

If you do not want to use gifs on the site, but prefer PNGs for their best chromaticity, but you still need to animate them, then this is the way:

CSS keyframes 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 smooth movement from 0px to −500px there are sharp jumps with pauses between them. This is ideal for animations that use a sheet with a frame-by-frame image of the sprite. 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 animation playback speed , which is quite pleasing, but there is a problem: the animation always starts from the first frame and therefore looks like a jerk. I also tried to animate the duration of the animation (inheriting from the parent element), but unfortunately this is not supported. So, I think, if you need a more dynamic speed control (animation animation), you still have to resort to javascript.

P.S. Found a real example of the use of this technique: Impending logo.