Material Design CSS Animations: Spinning Icon Transitions
Google has done an excellent job documenting and sharing their Material Design specifications. And while they’ve shared a ton of great resources to mimic Material Design in your own applications, they haven’t actually done the coding for you. By no means am I complaining, but I wanted to share some HTML/CSS I’ve pieced together to mimic what I think is one of Material Design’s best “delightful details”: icon transitions.
Several of Google’s best icon transitions have been meticulously designed:
However, it’s not always practical to create custom transitions between two very different icons. An example of this the transition below (used in GMail’s new “Inbox” UI), which is using what I would call a “universal” icon transition in Material Design:
Here's the same animation in slomo:
This transition isn’t as fancy as Google’s custom transitions, but it is still a very smooth way to switch between icons. As promised, here is the code for this transition: