<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-timing-BE-05.jpg); 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:50; left:90" src="../images/red.jpg" height="50" width="30"/>
<t:animate id="anim1" targetElement="rect1" attributeName="height" from="50" to="25" begin="2s" dur="2s" fill="freeze"/>
</div>
<div>
<img id="rect2" class="bord" style="position:absolute; top:50; left:234" src="../images/red.jpg" height="50" width="30"/>
<t:animate id="anim2" targetElement="rect2" attributeName="height" from="50" to="25" begin="anim1.end+1s" dur="2s" fill="freeze"/>
</div>

<div>
<img id="rect4" class="bord" style="position:absolute; top:160; left:90" src="../images/red.jpg" height="50" width="30"/>
<t:animate id="anim4" targetElement="rect4" attributeName="height" from="50" to="25" begin="click" dur="2s" fill="freeze"/>
</div>
<div>
<img id="rect5" class="bord" style="position:absolute; top:160; left:234" src="../images/red.jpg" height="50" width="30"/>
<t:animate id="anim5" targetElement="rect5" attributeName="height" from="50" to="25" begin="rect5.click+1s" dur="2s" fill="freeze"/></div>
<div>
<img id="rect6" class="bord" style="position:absolute; top:160; left:380" src="../images/red.jpg" height="50" width="30"/>
<t:animate id="anim6a" targetElement="rect6" attributeName="width" repeatCount="2" from="30" to="30" begin="click" dur="1s" fill="freeze"/>
<t:animate id="anim6b" targetElement="rect6" attributeName="height" from="50" to="25" begin="anim6a.repeat(2)" dur="2s" fill="freeze"/>
</div>
<div>
<img id="rect7" class="bord" style="position:absolute; top:270; left:90" src="../images/red.jpg" height="50" width="30"/>
<t:animate id="anim7" targetElement="rect7" attributeName="height" from="50" to="25" begin="accessKey(1)" dur="2s" fill="freeze"/>
</div>
<div>
<img id="rect8" class="bord" style="position:absolute; top:270; left:234" src="../images/red.jpg" height="50" width="30"/>
<t:animate id="anim8" targetElement="rect8" attributeName="height" from="50" to="25" begin="wallclock(2000-01-01Z)" dur="2s" fill="freeze"/>
</div>			
<div>
<img id="rect9" class="bord" style="position:absolute; top:270; left:380" src="../images/red.jpg" height="50" width="30"/>
<t:animate id="anim9" targetElement="rect9" attributeName="width" from="30" to="30" begin="indefinite" dur="1s" fill="freeze"/>
</div>	
<p class="legende"><t:animate id="anim9" targetElement="rectName" attributeName="width" from="30" to="30" begin="XXXX" dur="1s" fill="freeze"></p> 			
</body>
</html>