Sprite sheet animation with steps()

If you don’t wanna use gifs on your site and rather PNGs for better colors, but still be able to animate them, here an option:

CSS keyframe animations have a property called animation-timing-function and one of the options is to use the steps() feature like in this example:

div {
    animation: play 1s steps(10) infinite;
}

@keyframes play {
      0% { background-position:    0px 0; }
    100% { background-position: -500px 0; }
}

The difference to the other easing options is that instead of continuously moving from 0px to -500px, it jumps in steps with pauses in between. This is perfect for animations using a sprite sheet. In the above example it’s steps of 50px with a pause of 100ms (10 steps in total).

Here a little demo.

See the Pen Steps Animation by simurai (@simurai) on CodePen.

As you can see, you can change the speed how fast the animation should play, which is pretty cool, the only problem is that it always starts from the beginning and makes it look jumpy. I also tried to animate the animation-duration by using inherit from a parent element, but unfortunately that is not supported. So I guess if you wanna have a more dynamic speed (animating the animation), you still need to use JS for that.

ps. Here an example found in the wild: The logo of Impending. It could also be used for HTML5 games. Here a Street Fighter II demo and post.