    <html  xmlns="http://www.w3.org/1999/xhtml" xmlns:t ="urn:schemas-microsoft-com:time" >
    <head>
    <?IMPORT namespace="t" implementation="#default#time2"?>
    <title>animateMotion Element</title>
    <style>
    body { background-image: url(../images/animation-motion-BE-11.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>
    <img id="rect1" class="bord" style="position:absolute;top:-30; left:-15" src="../images/red.png" height="30" width="30"/>
     <t:animateMotion targetElement="rect1"  from="25,100" to="125,75" begin="0s" dur="3s" fill="freeze"/>
    <img id="rect2" class="bord" style="position:absolute; top:-30; left:-15" src="../images/red.png" height="30" width="30"/>
     <t:animateMotion targetElement="rect2" values="225,100;325,75;425,75" begin="0s" dur="6s" calcMode="linear" fill="freeze"/>
    <img id="rect3" class="bord" style="position:absolute; top:-30; left:-15" src="../images/red.png" height="30" width="30"/>
     <t:animateMotion targetElement="rect3" path="M25 225 C25 175 125 150 175 200" begin="0s" dur="6s" calcMode="linear" fill="freeze"/>
    <p class="legende"></p>
    </body>
    </html>