Example 4: The Race

Below is an example of three timelines running in parallel, yet at different speeds.

Start faster (keySplines="0 .75 .5 1")
Slow and steady (no keySplines)
Start slower (keySplines="1 .5 .75 0")
<smil:par begin="startrace.click" dur="10s">
 <smil:animateMotion begin="0" dur="3" calcMode="spline" targetElement="racefaster"
   values="20,0;300,0" fill="hold" keySplines="0 .75 .5 1"  keyTimes="0;1" />
 <smil:animateMotion begin="0" dur="3" calcMode="linear" targetElement="racesteady"
   values="20,0;300,0" fill="hold" />
 <smil:animateMotion begin="0" dur="3" calcMode="spline" targetElement="raceslower"
   values="20,0;300,0" fill="hold" keySplines="1 .5 .75 0"  keyTimes="0;1" />
</smil:par>

<input id="startrace" type="button" value="Start Race" />
<div style="background-color:lightgreen;position:relative;top:0;left:0;width:50"
	 id="racefaster">Start faster (keySplines="0 .75 .5 1")</div>
<div style="background-color:lightgreen;position:relative;top:0;left:0;width:50"
	 id="racesteady">Slow and steady (no keySplines)</div>
<div style="background-color:lightgreen;position:relative;top:0;left:0;width:50"
	 id="raceslower">Start slower (keySplines="1 .5 .75 0")</div>