SVG Animation Sequencing

The goal of the next series of SVG animations is to understand how to sequence CSS transforms.

As you can see from the Pen above, the timing of this initial version goes off the rails after a few passes.

I tried fiddling around with the CSS, but didn’t manage to get it quite just right — even after multiple tries.

It is obvious that I need to acquire a far deeper understanding of how to sequence SVG animations —  which in this case is being implemented as CSS transforms on various elements of an SVG.

Next post, let’s see what the spec says about the subject.

In particular, is it possible to create a unifying CSS animation timeline ( ie, a sort of track where you can place transforms) for all elements of a single SVG?

W3C look ahead peek… if you can follow this, let me know how to fix it!