    <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-06.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:76" src="../images/red.png" height="10" width="20"/>
    <t:animate targetElement="rect1" attributeName="height" calcMode="discrete" values="100;85;60;10" begin="0s" dur="8s" fill="freeze"/>
    </div>
    <div>
    <img id="rect2" class="bord" style="position:absolute; top:60; left:185" src="../images/red.png" height="10" width="20"/>
    <t:animate targetElement="rect2" attributeName="height" values="100;85;60;10" begin="0s" dur="9s" fill="freeze"/>
    </div>
    <div>
    <img id="rect3" class="bord" style="position:absolute; top:60; left:296" src="../images/red.png" height="10" width="20"/>
    <t:animate targetElement="rect3" attributeName="height" calcMode="paced" values="100;85;60;10" begin="0s" dur="9s" fill="freeze"/>
    </div>
    <div>
    <img id="rect4" class="bord" style="position:absolute; top:60; left:406" src="../images/red.png" height="10" width="20"/>
    <t:animate  targetElement="rect4" attributeName="height" calcMode="spline" keySplines="0 0 1 1;0 0 1 1;.75 0 0 .75" keytimes="0;.333;.666;1" values="100;85;60;10" begin="0s" dur="9s" fill="freeze"/>
    </div>
    <div>
    <img id="rect5" class="bord" style="position:absolute; top:210; left:76" src="../images/red.png" height="10" width="20"/>
    <t:animateMotion targetElement="rect5"  calcMode="discrete" values="0,100;0,85;0,60;0,10" begin="0s" dur="8s" fill="freeze"/>
    </div>
    <div>
    <img id="rect6" class="bord" style="position:absolute; top:210; left:185" src="../images/red.png" height="10" width="20"/>
    <t:animateMotion targetElement="rect6"  calcMode="linear" values="0,100;0,85;0,60;0,10" begin="0s" dur="9s" fill="freeze"/>
    </div>
    <div>
    <img id="rect7" class="bord" style="position:absolute; top:210; left:296" src="../images/red.png" height="10" width="20"/>
    <t:animateMotion targetElement="rect7" values="0,100;0,85;0,60;0,10" begin="0s" dur="9s" fill="freeze"/>
    </div>
    <div>
    <img id="rect8" class="bord" style="position:absolute; top:210; left:406" src="../images/red.png" height="10" width="20"/>
    <t:animateMotion targetElement="rect8" calcMode="spline" keySplines="0 0 1 1;0 0 1 1;.75 0 0 .75" keytimes="0;.333;.666;1" values="0,100;0,85;0,60;0,10" begin="0s" dur="9s" fill="freeze"/>
    </div>
    </body>
    </html>