Let us start by looking at a simple values attribute with two or more values in the example below:

  • The time is split equally between the number of regions
  • The first has just two values so the animation is just a uniform movement over time.
  • The second has a very small change in value followed by a long one. In consequence progress is very slow in the first part and fast in the second
  • The third is just the opposite so change in values is slow in the first half and faster in the second
  • The fourth is much more complex with multiple regions, some small, some large, and even changing direction in terms of value. Still each region gets an equal share of the time

At the bottom is the time versus value graph for each animation.

15;615 15;45;615 15;465;615 15;40;225;150;450;495;615 15 615 Distance travelled Time passed <animate attributeName="cx" values="15;615" begin="1s" dur="5s" /> Time split equally between intervals

Here is an example showing the kind of effects you can produce by just changing the speed at which values change:

X 
<circle  cx="450" cy="240" r="20" style="fill:blue">
<animate attributeName="r" values="20;100;100;30;40;50;40;30;160;20"  
    begin="crcl1.click+0s" dur="5s"  repeatCount="5" />
</circle>
<circle cx="20" cy="400" r="10" style="fill:green">
<animate attributeName="cy" values="400;100;300;270;20"  begin="crcl1.click+0s" dur="10s"/>
<animate attributeName="cy" values="20;50;100;350;350;400"  begin="crcl1.click+10s" dur="15s" />
<animate attributeName="cx" values="40;200;60;600;80;700"  begin="crcl1.click+0s" dur="18s"/>
<animate attributeName="cx" values="700;650;80;40"  begin="crcl1.click+18s" dur="7s"/>
</circle>