With the keyTimes, greater control is possible over the time allocated to each interval of a values attribute.

In the example below, each interval is of equal length but by varying the amount of time allocated to each, different effects can be achieved.

The value of the keyTimes attribute has the same number of intervals as the values attribute. The first should be 0 and the last 1 and the intermediate values give the fraction of the complete time interval that should be reached by this value. So if the total duration is 5 secs then a keyTimes value of 0.8 represents 4 secs though the total duration.

<animate attributeName="cx" begin="crcl1.click"  dur="5s"  
values="15;165;315;465;615" keyTimes="0; 0.25; 0.5; 0.75; 1" fill="green" />
values="15;165;315;465;615" keyTimes="0; 0.07; 0.2; 0.467;1" fill="red"/>
values="15;165;315;465;615" keyTimes="0;0.533; 0.8; 0.93; 1" fill="blue"/>
values="15;165;315;465;615" keyTimes="0;  0.4; 0.5; 0.6;  1" fill="black"/>
0;0.25;0.5;0.75;1 0;0.07;0.2;0.467;1 0;0.533;0.8;0.93;1 0;0.4;0.5;0.6;1 15 615 0 1 0 1 0 1 0 1

The graphs at the bottom show the distance travelled between 15 and 615 over the 0 to 1 time interval.

The green circle has equal time intervals for the four intervals so that this is the default if no keyTimes attribute is provided.

The red circle has time intervals that grow in value so it moves quickly to start with and gradually slows down.

The blue circle has the opposite behaviour speeding up and using less time in the later intervals.

The brown circle starts fast, slows down over the middle section and then speeds up again.

The calcMode="spline" was defined earlier. Here we give an indication of how the value changes over a single spline interval. As was shown before, the attribute can have N values and, in this case, there will be N-1 spline curves. This example just has two values and 1 spline curve.

<animate attributeName="cx"  begin="crcl2.click" calcMode="spline" dur="5s"  values="15;600"  keyTimes="0;1" 
keySplines=" 0  0    1    1  " />
keySplines=".5  0    .5   1  " />
keySplines=" 0  .75  .25  1  " />
keySplines=" 1  0    .25 .25 " />

The cubic spline being defined is equivalent to M0,0C x1 y1 x2 y2 1 1 where the four values given are x1 y1 x2 y2.

The diagrams below show the Cubic spline curve and the circles show the motion.

0 0 1 1 .5 0 .5 1 0 .75 .25 1 1 0 .25 .25 (0,0) (1,1) (0,0) (1,1) (0,0) (1,1) (0,0) (1,1)

The green circle is equivalent to the default linear animation.

The red circle is like an object that gathers speed, reaches its highest speed and then falls back to zero speed at the end.

The blue circle accelerates up to its full speed and continues at this speed until the end. In a multi interval description, the next interval might be defined as the green circle and the final one would be the reverse of this one to cause the object to slow to a stop.

The brown circle starts off very slowly, picks up speed very quickly in the middle section then just increases speed slowly in the last part.

The use of both keyTimes and keySplines gives a very flexible way of defining complex motions succinctly.