Animating a sprite sheet with steps ()

Original author: simurai
  • Transfer
  • Tutorial
[principle illustration]

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 .

Also popular now: