SMIL Transition

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.

Try It Yourself (TIY)