Creating animations with plain vanilla CSS

The inception of CSS-based animation is a critical milestone in modern web design. Before that, we used to rely on JavaScript to accommodate animations in our web applications. We were manipulating DOM elements through complex and cumbersome scripts based on intervals, timeouts, and loops. Unfortunately, this was neither maintainable nor scalable.

Then, modern browsers embraced the functionalities brought by the recent CSS transformation: transitions, keyframes, and animation properties. It soon became a game-changer in the context of web interaction design. While support for these techniques in old browsers is far from optimal, the rest of them provide full support for these CSS APIs.

We assume that you have a broad understanding of how CSS animation works in the context of building keyframe-driven or transition-based animations. Providing coverage of these techniques is obviously beyond the scope of this book. CSS-based animations...