From http://www.w3schools.com (Copyright Refsnes Data)

SMIL Transitions

Previous Next

Transitions can generate effects like "fading" and "wiping" to elements.


Transitions Belongs To SMIL 2.0

Transitions are new in SMIL 2.0. Transitions were not a part of the SMIL 1.0 specification.

Internet Explorer 6 supports transitions based on the SMIL 2.0 specification. Transitions are implemented with the element <transitionfilter>.


Attributes

The <transitionfilter> element can have several attributes. The most common are:

Attribute Description Example
type Defines the type of transition filter (see transition filter list) type="clockWipe"
begin Defines when the transition should begin begin="0s"
mode Defines the transition mode mode="in"
from Defines the starting value of the transition from="0.2"
to Defines the ending 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: Displaying Transitions

<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 example above the image will be displayed for 4 seconds. The transition filter will use 2 second to "clockWipe" the image into its place.

note  You must run Internet Explorer 6 for the sample to function.

Click here to try it yourself.


Previous Next

From http://www.w3schools.com (Copyright Refsnes Data)