12.7 Timing of Multistage Animations

By default, the duration of the animation is divided into equal time periods for each transition.

The keyTimes attribute allows you to divide the duration in other ways. The format of keyTimes is also a semicolon-separated list, and it must have the same number of entries as values.

• The first entry is always 0 and the last is always 1;
• the intermediary times are expressed as decimal numbers between 0 and 1, representing the proportion of the animation duration that should pass by the time the corresponding value is reached.

• paced
  The SVG viewer will calculate the distance between subsequent values and divide up the duration so that the rate of change is constant (any keyTimes attribute will be ignored). Paced animation mode works with colors and simple numbers or lengths, but is not possible for lists of points or path data.
• linear
  The default for elements; each transition will proceed at a steady pace, but the time alotted to each transition is equal (if keyTimes aren't specified) or is determined by keyTimes.
• discrete
  The animation will jump from one value to the next without transitioning. If you animate a property that doesn't support transitions (like font-family), discrete mode will be used automatically.
• spline
  The animation will accelerate and decelerate according to the values of the keySplines attribute; you can read more about it in the SVG specifications.

Example 1. Animating color by specific values and times

<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>