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:


source

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: