Twitter’s fav icon with CSS step function

Twitter’s new fav icon animation uses static image and the sprite sheet technique. This is the technique we use a lot in game design.

The shows how we can archive the Twitter’s fav sprite sheet animation with CSS-only steps function.

Back in 2012, Simurai has demonstrated the same effect, which I have used in my classes and books. It’s demo overlays the movement of the sprite sheet to help you understand the technique better.

Screenshot of Simurai’s step function demonstration


overlaied image when clicked on thumbnail

Makzan | Web design scrapbook | Table of Content