12.6 Specifying Multistage Animations

It is possible to give specific intermediary values for an animation, allowing a single <animate> element to define complex sequences of changes. .

Example 1. Animating color by specific values

<svg width="200" height="200" viewBox="0 0 100 100" 
        xmlns="http://www.w3.org/2000">
  <circle cx="50" cy="60" r="30" style="fill:#ff9; stroke:black;">
    <animate
      attributeName="fill"
      attibuteType="XML"
      begin="2s" dur="4s" values="#ff9;#99f;f99;#9f9"
      fill="freeze"/>
  </circle>
</svg>

Just as it is possible to synchronize an animation with the beginning or ending of another animation, you can tie the start of one animation to the start of a specific repetition of another animation. You give the first animation an id, and then set the begin of the second animation to id.repeat(count), where count is a number beginning at 0 for the first repetition. Example 12-7 shows an upper circle moving from left to right three times, requiring 5 seconds for each repetition. The lower square will go right to left only once, and will not begin until halfway through the second repetition.

Example 2. Synchronizing an animation with a repetition

<svg width="400" height="200" viewBox="0 0 400 200" xmlns="http://www.w3.org/2000">
        <circle cx="60" cy="60" r="15"
            style="fill: none; stroke: red;">
            <animate id="circleAnim"
                     attributeName="cx"
                     attributeType="XML"
                     begin="0s" dur="5s" repeatCount="3"
                     from="60" to="260"
                     fill="freeze"/>
        </circle>
        <rect x="230" y="80" width="30" height="30"
            style="fill: #ccf; stroke: black;">
            <animate
                    attributeName="x"
                    attributeType="XML"
                    begin="circleAnim.repeat(1)+2.5s" dur="5s"
                    from="230" to="30"
                    fill="freeze"/>
        </rect>
    </svg>