SMIL Transitions

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

# SMIL Transitions

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.

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

Click here to try it yourself.

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