CSS Micro Animation Examples

Below is an example of micro animations from Twitter desktop app.

When a "like" button is clicked, a small heart animation is played, improving overall user experience on the app. Another animation is played when you "retweet" a post.

You might also see an "airport terminal" (Also known as the split-flap display) effect on tweet's digits. This CSS animation tutorial will guide you on your way to making your own micro animations with CSS.

This tutorial explores micro animations and how to make your own using CSS's @keyframes property.

I'll start this tutorial with an example of what a micro animation is and then explain how I created my own. You're probably already familiar with Twitter's "heart" animation every time you press the like button: