<html xmlns="http://www.w3.org/1999/xhtml"  xmlns:t ="urn:schemas-microsoft-com:time" >
<head>
<?IMPORT namespace="t" implementation="#default#time2"?>
<title>animate Element</title>
<style>
body { background-image: url(../images/animation-values-BE-08.png); background-repeat:no-repeat;}
.legende {font-family:Helvetica;font-size:13;color:black;position:absolute;top:470;left:10;}
.bord {border-width:2;border-color:green;}
</style>
</head>
<body>
<div>
<img id="rect1" class="bord" style="position:absolute; top:60; left:90" src="../images/red.png" height="10" width="20" />
<t:animate targetElement="rect1" attributeName="height" calcMode="discrete" values="100;85;60;10" keyTimes="0;.2;.4;.6" begin="0s" dur="10s" fill="freeze"/>		 
</div>
<div>
<img id="rect2" class="bord" style="position:absolute; top:60; left:230" src="../images/red.png" height="10" width="20" />
<t:animate targetElement="rect2" attributeName="height" calcMode="discrete" values="100;85;60;10" keyTimes="0;.2;.6;.8" begin="0s" dur="10s" fill="freeze"/>			
</div>
<div>
<img id="rect3" class="bord" style="position:absolute; top:60; left:370" src="../images/red.png" height="10" width="20" />
<t:animate targetElement="rect3" attributeName="height" calcMode="paced" values="100;85;60;10" keyTimes="0;.25;.5;1" begin="0s" dur="9s" fill="freeze"/>				
</div>
<div>
<img id="rect4" class="bord" style="position:absolute; top:220; left:90" src="../images/red.png" height="10" width="20" />
<t:animate  targetElement="rect4" attributeName="height" calcMode="linear" values="100;85;60;10" keyTimes="0;.25;.5;1" begin="0s" dur="8s" fill="freeze"/>			
</div>
<div>
<img id="rect5" class="bord" style="position:absolute; top:220; left:230" src="../images/red.png" height="10" width="20" />
<t:animate targetElement="rect5" attributeName="height" calcMode="linear" values="100;85;60;10" keyTimes="0;.5;.75;1" begin="0s" dur="8s" fill="freeze"/>		
</div>
<div>
<img id="rect6" class="bord" style="position:absolute; top:220; left:370" src="../images/red.png" height="10" width="20" />
<t:animate targetElement="rect6" attributeName="height" calcMode="spline" values="100;85;60;10" keyTimes="0;.25;.5;1" keySplines="0 0 1 1;0 0 1 1;1 0 0 1" begin="0s" dur="8s" fill="freeze"/>
			
</div>
<p class="legende"></p> 			
</body>
</html>