    <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>