In game development, it’s common to use spritesheets for animation, but this technique isn’t as widely used on the web. Which is a shame, because we can do some pretty cool stuff with sprites! In this post, we’ll share the niche CSS function you can use to leverage this technique, and explore some of the potential use cases.

Josh W. Comeau's platform provides resources in frontend development, React.js, and CSS, offering insightful articles, tutorials, and code examples. With a focus on accessible and creative web development techniques, Josh W. Comeau empowers developers to craft engaging user experiences and solve complex problems in the world of web development.

Josh W Comeau

A deep dive into using sprite-based animation on the web, inspired by Twitter's 2015 'Like' button implementation. The technique uses a spritesheet (a single image containing all animation frames) combined with CSS `object-fit: cover`, `object-position`, and the lesser-known `steps()` timing function to flip between frames. The post covers the full implementation, explains the nuances of `jump-none` vs `jump-end` step positions in looping vs non-looping animations, and discusses when sprites are appropriate (pixel-art style characters, game assets) versus when procedural CSS/JS animation is preferable (particle effects that benefit from randomness). Includes a real-world example of an animated cat character with dynamic state changes.

Sprites on the Web • Josh W. Comeau

Link to this heading Basic implementation

Interesting and very well presented!

Very nice article and informative.

Very well written and informative! Thanks!