From http://www.w3schools.com (Copyright Refsnes Data)
Transitions can generate effects like "fading" and "wiping" to elements.
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>.
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" |
The following transition filters can be used:
fade, barnDoorWipe, barWipe, clockWipe, ellipseWipe, fanWipe, irisWipe, pushWipe, slideWipe, snakeWipe, spiralWipe, starWipe |
<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)