Sprites on the Web • 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.