I’ve long found steps() a curious feature of the CSS animation specification. Rarely used in development and tricky to understand, I gave the feature fairly short shrift in my last book (Pro CSS3 Animation). However, steps() has a few perfect areas of application, and can be easily understood with the right analogies.

“Overlapping action” is one of the 12 celebrated Disney principles of animation, closely related to “follow through”. In this article I’m using the term “overlapping action” in a slightly different and expanded sense, one specific to writing CSS: how to create the impression of multiple independent actions from a single CSS animation directive.