Twitter's "fave" animation - CSS Animation

Twitter recently updated the design of their “fave” (also known as “fav”) button, introducing a new animation. Rather than rely on CSS transitions, the animation makes use of a series of images. Here’s how to recreate the animation using the CSS animation steps timing function. Update: Heart The following technique can also be used with the new “Heart” animation, as it’s handled in a similar way:

[rochefort]

twitter

[shinki0121]

twitter animation icon

[takohaka]

CSSだけでフレームアニメーションを作りたくなった時に。steps知らなかった。