Making Micro Animations with CSS

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:

You can create a popup notification to let user know an action has occurred. But there is something about confirming an action with a micro animation.

My Coding Books

I don’t know if micro animations actually invoke real feelings of empathy. But upon my research I’ve discovered following properties of micro animations:

• 1. They can add personality to your app.
• 2. They are a technical challenge that requires writing custom code.
• 3. Can invoke a feeling of an event having occurred.

When I was working on Semicolon project I experimented with 3 micro animations:

• Airplane: for invoking “post message” dialog.