SMIL Transition
- Previous Page SMIL Parallel
- Next Page SMIL Media
Transition can generate effects such as 'fade in and out' and 'erase' for elements.
Transition belongs to SMIL 2.0
Transition is a new feature in SMIL 2.0. Transition is not part of the SMIL 1.0 specification.
Internet Explorer 6 supports Transition based on SMIL 2.0 specification. Transition is implemented by the <transitionfilter> element.
Properties
<transitionfilter> element contains several elements, the most commonly used are:
Properties | Description | Examples |
---|---|---|
type | Define the type of the transition filter (refer to the transition filter list) | type="clockWipe" |
begin | Define when the transition starts | begin="0s" |
mode | Define the transition mode | mode="in" |
from | Define the start value of the transition | from="0.2" |
to | Define the end value of the transition | to="0.8" |
Transition Filters
The following transition filters can be used:
fade, barnDoorWipe, barWipe, clockWipe, ellipseWipe, fanWipe, irisWipe pushWipe, slideWipe, snakeWipe, spiralWipe, starWipe
Example: Display Transition
<html xmlns:t="urn:schemas-microsoft-com:time"> <head> <?import namespace="t" implementation="#default#time2"> <style>.t {behavior: url(#default#time2)}</style> </head> <body> <t:transitionfilter targetelement="keyb" type="clockWipe" begin="keyb.begin" dur="2s" /> <img id="keyb" class="t" src="pic_keyb.jpg" dur="4s" width="128" height="107" /> </body> </html>
In the above example, the image will be displayed for 4 seconds. The Transition filter will display the image in 'clockWipe' style for 2 seconds.
Tip:You must run Internet Explorer 6 to display this example.
- Previous Page SMIL Parallel
- Next Page SMIL Media