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

SMIL Transitions

« Previous Next Chapter »

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

Transitions in SMIL 2.0

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

IE 6 support transitions based on the SMIL 2.0 specification.

Transitions are implemented with the element transitionfilter.

Attributes

The <transitionfilter> tag 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

Displaying Transitions

In the example below the image will be displayed for 4 seconds. The transition filter will use 2 second to "clockWipe" the image into its place.

Example

<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>

Try it yourself »

« Previous Next Chapter »

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