<html xmlns:t ="urn:schemas-microsoft-com:time" >
<head>
<?IMPORT namespace="t" implementation="#default#time2">
<title>animate Element</title>
<style>
.legende {font-family:Helvetica;font-size:13;color:black;position:absolute;top:470;left:10;}
.bord1 {border:2px black solid; background:lightgreen ;font-size: 1px;}
.bord2 {border:2px black solid; background:blue ;font-size: 1px;}
.bord3 {border:2px black solid; background:red ;font-size: 1px;}
</style>
</head>
<body>
<div id="rect1" style='position:absolute;top:"10px";left:"0px";height:"20px";width:"120px";background-Color:"green"'></div>
<div id="rect2" style='position:absolute;top:"60px";left:"0px";height:"20px";width:"240px";background-Color:"blue"'></div>
<div id="rect3" style='position:absolute;top:"110px";left:"0px";height:"20px";width:"240px";background-Color:"red"' ></div>
<t:animate targetElement="rect3"  attributeName="width" attributeType="XML" from="240" to="356" begin="1s" dur="5s" fill="freeze"/>
</body>
</html>