Makzan / I share what I learned

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


Published on 2015-02-15. More articles like this:
- Web Technologies

Previous <- Basecamp’s 404 page
Next -> Portrait upside down

📬 Subscribe to Makzan’s Weekly Dispatch

Want productive tips and web technologies links like this in your inbox each week? Sign up for weekly dispatch each week. No spam ever. Just useful content:

What to expect: If you wish to withdraw your consent and stop hearing from us, simply click the unsubscribe link at the bottom of every email we send or contact us at We value and respect your personal data and privacy. To view our privacy policy, please visit our website. By submitting this form, you agree that we may process your information in accordance with these terms.