Sequencing & Chaining Animations
In many scenarios, you don't want all your animations to start at once. Sequencing allows you to trigger an animation based on the start or end of another animation.
SMIL makes this extremely easy by allowing you to reference the id of an animation tag within the begin attribute of another.
Using Animation IDs
To chain animations, first give your <animate> tags a unique id. Then, in the begin attribute of the next animation, use the format id.end or id.begin.
Adding Offsets
You can also add or subtract time from these triggers. For example, begin="step1.end + 2s" will wait 2 seconds after the first animation finishes before starting the next one.
Example: Chained Animation Sequence
In this example, three circles fade in and slide up one after the other, creating a smooth staggered transition. Each animation is triggered by the completion of the previous one using its id.
The fill="freeze" Attribute
Notice the use of fill="freeze" in the example. By default, when an animation ends, the element resets to its original state. freeze tells the browser to keep the final value of the animation, which is essential for multi-step sequences where you want the element to "stay" where it just moved.