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 CSSAnimation.rocks 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

 

Makzan
I teach web design. I write books on HTML5 games development. I host classes on mobile web and app development. I made animation with Adobe Flash (now Animate).

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.