Wiki  |   Blog  |   Sitemap  |   Search  
Home
JavaScript UI FrameworkExamplesRuntime (DOM, SMIL..)SMIL 3.0 animations

SMIL 3.0 Animation Module


animate element (@calcMode=linear)

Source code

<script type="application/ample+xml" xmlns:smil="http://www.w3.org/2008/SMIL30/"> <div class="animateable" style="left: 0px; top: 0px"> <smil:animate begin="click" dur="1s" from="50px" to="200px" attributeName="left" attributeType="CSS" /> smil:animate @from/@to </div> <div class="animateable" style="left: 0px; top: 0px"> <smil:animate begin="click" dur="1s" to="200px" attributeName="left" attributeType="CSS" /> smil:animate @to </div> <div class="animateable" style="left: 0px; top: 0px"> <smil:animate begin="click" dur="1s" from="50px" by="150px" attributeName="left" attributeType="CSS" /> smil:animate @from/@by </div> <div class="animateable" style="left: 0px; top: 0px"> <smil:animate begin="click" dur="1s" by="200px" attributeName="left" attributeType="CSS" /> smil:animate @by </div> <div class="animateable" style="left: 0px; top: 0px"> <smil:animate begin="click" dur="1s" values="50px;100px;150px;200px" attributeName="left" attributeType="CSS" /> smil:animate @values </div> </script>
animate element (@calcMode=discrete)

Source code

<script type="application/ample+xml" xmlns:smil="http://www.w3.org/2008/SMIL30/"> <div class="animateable" style="left: 0px; top: 0px"> <smil:animate begin="click" dur="1s" calcMode="discrete" values="50px;100px;150px;200px" attributeName="left" attributeType="CSS" /> smil:animate @values @calcMode=discrete </div> </script>
animate element (@calcMode=paced)

Source code

<script type="application/ample+xml" xmlns:smil="http://www.w3.org/2008/SMIL30/"> <div class="animateable" style="left: 0px; top: 0px"> <smil:animate begin="click" dur="1s" calcMode="paced" values="50px;50px;50px;50px" attributeName="left" attributeType="CSS" /> smil:animate @values @calcMode=paced </div> </script>
animateMotion element

Source code

<script type="application/ample+xml" xmlns:smil="http://www.w3.org/2008/SMIL30/"> <div class="animateable" style="left: 0px; top: 0px"> <smil:animateMotion begin="click" dur="1s" from="0px 0px" to="100px 200px" attributeType="CSS" /> smil:animateMotion @from/@to </div> <div class="animateable" style="left: 0px; top: 0px"> <smil:animateMotion begin="click" dur="1s" by="200px 200px" attributeType="CSS" /> smil:animateMotion @by </div> </script>
animateColor element

Source code

<script type="application/ample+xml" xmlns:smil="http://www.w3.org/2008/SMIL30/"> <div class="animateable" style="left: 0px; top: 0px"> <smil:animateColor begin="click" dur="1s" from="rgb(0, 0, 0)" to="rgb(255, 255, 255)" attributeName="background-color" attributeType="CSS" /> smil:animateColor rgb(d, d, d) @from/@to </div> <div class="animateable" style="left: 0px; top: 0px"> <smil:animateColor begin="click" dur="1s" from="#000000" to="#ffffff" attributeName="background-color" attributeType="CSS" /> smil:animateColor #hhh @from/@to </div> <div class="animateable" style="left: 0px; top: 0px"> <smil:animateColor begin="click" dur="1s" from="#000" to="#fff" attributeName="background-color" attributeType="CSS" /> smil:animateColor #hhhhhh @from/@to </div> <div class="animateable" style="left: 0px; top: 0px"> <smil:animateColor begin="click" dur="1s" from="red" to="blue" attributeName="background-color" attributeType="CSS" /> smil:animateColor @from=red/@to=blue </div> <div class="animateable" style="left: 0px; top: 0px"> <smil:animateColor begin="click" dur="1s" to="green" attributeName="background-color" attributeType="CSS" /> smil:animateColor @to </div> </script>
set element

Source code

<script type="application/ample+xml" xmlns:smil="http://www.w3.org/2008/SMIL30/"> <div class="animateable" style="left: 0px; top: 0px"> <smil:set begin="click" dur="1s" to="200px" attributeName="left" attributeType="CSS" /> smil:set @to </div> </script>

SMIL 3.0 Timing and Synchronization Module


Repeatition Module

Source code

<script type="application/ample+xml" xmlns:smil="http://www.w3.org/2008/SMIL30/"> <div class="animateable" style="left: 0px; top: 0px"> <smil:animate begin="click" repeatCount="5" dur="1s" from="50px" to="200px" attributeName="left" attributeType="CSS" /> smil:animate @repeatCount=5 </div> <div class="animateable" style="left: 0px; top: 0px"> <smil:animate begin="click" repeatDur="5s" dur="1s" from="50px" to="200px" attributeName="left" attributeType="CSS" /> smil:animate @repeatDur=5s </div> </script>

SMIL 3.0 Time Manipulations Module

Source code

<script type="application/ample+xml" xmlns:smil="http://www.w3.org/2008/SMIL30/"> <div class="animateable" style="left: 0px; top: 0px"> <smil:animate begin="click" autoReverse="true" dur="1s" from="50px" to="200px" attributeName="left" attributeType="CSS" /> smil:animate @autoReverse=true </div> <div class="animateable" style="left: 0px; top: 0px"> <smil:animate begin="click" speed="0.5" dur="1s" from="50px" to="200px" attributeName="left" attributeType="CSS" /> smil:animate @speed=0.5 </div> <div class="animateable" style="left: 0px; top: 0px"> <smil:animate begin="click" accelerate="0.5" dur="1s" from="50px" to="200px" attributeName="left" attributeType="CSS" /> smil:animate @accelerate=0.5 </div> <div class="animateable" style="left: 0px; top: 0px"> <smil:animate begin="click" decelerate="0.5" dur="1s" from="50px" to="200px" attributeName="left" attributeType="CSS" /> smil:animate @decelerate=0.5 </div> </script>