In the previous article I talked about steps() in CSS animation, and provided a simple example (the ticking second hand of an analog watch). The same core techniques can be used for more complex animation, including a cartoon figure’s walk cycle.
Discrete Time: CSS steps()
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 with CSS Animation
“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.