Using HTML+TIME Transitions

Internet Development Index

It is now possible to create visual transitions with HTML+TIME (Timed Interactive Multimedia Extensions) easily without any knowledge of scripting. Click the Show Me button to see an example of HTML+TIME transitions.

This feature requires Microsoft?Internet Explorer 6 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

Internet Explorer 6 implements the inline transitions module of the SMIL 2.0 Transition Effects Modules Non-Microsoft link through the time2 behavior of HTML+TIME. You only have to learn one new HTML+TIME element called t:TRANSITIONFILTER and a few of the t:TRANSITIONFILTER attributes to get started. This article introduces you to these necessary components, and you will be adding exciting transitions to your Web pages in no time.

Prerequisites

This article assumes you know how to use Introduction to DHTML Behaviors, specifically, the time2 behavior of HTML+TIME. This article does not go into great detail on how to add a behavior to your page nor does it cover how to declare a namespace and use custom tags as required by the time2 behavior. These topics are covered in the HTML+TIME Overview and Spice Up Your Web Pages with HTML+TIME.

What Can Use Transitions?

As seen in the Show Me earlier, many different types of media can have transitions applied to them including images, video, and other elements such as the DIV element. As long as the element has renderable content, it can have a transition applied to it. HTML+TIME media elements, such as t:MEDIA and t:IMG, are automatically available for HTML+TIME transitions to be applied. All other elements must have layout for the transition to work on the element. Put simply, "having layout" means that an object has a defined height and width. Some objects, like form controls and the table and td elements, have layout by default. All other objects that can use transitions gain layout by setting the height or width property, setting the position property to absolute, specifying a value for the zoom property, or setting the contentEditable property to true.

Specific elements that cannot have HTML+TIME transitions applied to them include:

Now that it is clear what kind of content can use transitions, the next step is to learn about how to transition this content.

What Is Needed To Apply a Transition

The t:TRANSITIONFILTER element applies a transition to renderable content. Several associated attributes of the t:TRANSITIONFILTER specify the characteristics of the transition. The following example shows how to use several attributes of the t:TRANSITIONFILTER and their effects. Experiment with the attribute values in this example. An introduction to the t:TRANSITIONFILTER element and important attributes of the t:TRANSITIONFILTER follows in the sections ahead.

This feature requires Microsoft?Internet Explorer 6 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

TRANSITIONFILTER Element

As already stated, the t:TRANSITIONFILTER is the element that applies a transition to renderable content. The t:TRANSITIONFILTER can apply to content in one of two ways.

The only difference between these two techniques is organization. If you use the TARGETELEMENT, you can place the t:TRANSITIONFILTER anywhere in the document and all of the t:TRANSITIONFILTER elements in the document can be grouped together. Placing the t:TRANSITIONFILTER inside of the element that is to use a transition makes it clearer what t:TRANSITIONFILTER applies to what content.

A t:TRANSITIONFILTER cannot apply to more than one element. However, children of that element can transition along with the parent.

It is important to note that in order for a child element to transition along with the parent, the child element must have the default value of static for the position property. A value of absolute or relative, on the other hand, takes the child element out of flow from the parent and it does not transition with the parent. For example, the inner DIV in the following snippet does not transition with the parent. 

<DIV CLASS="TIME" STYLE="width:200px" ... >
<t:TRANSITIONFILTER ... >
<DIV STYLE="position:relative; top:30px">Inner DIV</DIV>
</t:DIV>

Many attributes of the t:TRANSITIONFILTER enable you to specify the characteristics of the transition. The following sections introduce these attributes and show how they influence the transition.

TYPE and SUBTYPE

The TYPE attributes specifies what kind of transition will occur. The TYPE attribute can either specify a transition value specific to HTML+TIME or a CSS transition. In the case of using a value specific to HTML+TIME, the TYPE attribute specifies the family of transitions to apply. For each HTML+TIME defined TYPE value, one or more values of the SUBTYPE attribute is available. This SUBTYPE value modifies the effect of the basic transition type specified by the TYPE value. For example, if you specify the transition to be of type barWipe, there are two subtypes available: leftToRight and topToBottom. If leftToRight is specified, then the transition progresses from the left to the right. If topToBottom is specified, then the media element transitions from the top of the element to the bottom. The following example demonstrates this.

<HTML XMLNS:t = "urn:schemas-microsoft-com:time">
<HEAD>
<TITLE>Using Different SUBTYPE Attribute Values</TITLE>
<STYLE>
.time    {behavior: url(#default#time2);}
</STYLE>
<?import namespace = t urn = "urn:schemas-microsoft-com:time"
implementation = "#default#time2" />
</HEAD>
<BODY>
<DIV CLASS="time" ID="oDiv1" STYLE="padding:20; width:370; background-color:#ffffcc;
font-family:arial; font-size:18pt; border:4px solid gold">
<t:TRANSITIONFILTER BEGIN="oDiv1.begin;" DUR="3" TYPE="barWipe"
SUBTYPE = "leftToRight"/>
SUBTYPE = "leftToRight"
</DIV>
<BR><BR>
<DIV CLASS="time" ID="oDiv2" STYLE="padding:20; width:370; background-color:#ffffcc;
font-family:arial; font-size:18pt; border:4px solid gold">
<t:TRANSITIONFILTER BEGIN="oDiv2.begin;" DUR="3" TYPE="barWipe"
SUBTYPE = "topToBottom"/>
SUBTYPE = "topToBottom"
</DIV>
</BODY>
</HTML>
This feature requires Microsoft?Internet Explorer 6 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

The default value for the TYPE attribute is barWipe. Generally, the SUBTYPE attribute does not need to be included, in which case, a default value is used.

Note  The TYPE value of starWipe is an exception. It is required to explicitly include the SUBTYPE value of fivePoint for this transition to work.

To find what SUBTYPE values are available for the given TYPE values, see the TYPE reference. In addition, the example in the What Is Needed To Apply a Transition section also demonstrates the different transition type values and the possible subtype values that are specifically defined for HTML+TIME.

As already mentioned, Cascading Style Sheets (CSS) transitions can also be specified as values for the TYPE attribute in t:TRANSITIONFILTER elements. The following example shows how to use a CSS transition to create a wheel transition. 

<HTML XMLNS:t = "urn:schemas-microsoft-com:time">
<HEAD>
<STYLE>
.time    {behavior: url(#default#time2);}
</STYLE>
<?import namespace = t urn = "urn:schemas-microsoft-com:time"
implementation = "#default#time2" />
</HEAD>
<BODY>
<DIV CLASS="time" ID="oDiv1" STYLE="padding:20; width:700px; height:100px;
background-color:#ffffcc; font-family:arial; font-size:14pt; border:4px solid gold">
<t:TRANSITIONFILTER BEGIN="oDiv1.begin;" DUR="3"
TYPE="progid:DXImageTransform.Microsoft.Wheel(spokes=8)"/>
TYPE="progid:DXImageTransform.Microsoft.Wheel(spokes=8)"
</DIV>
</BODY>
</HTML>
This feature requires Microsoft?Internet Explorer 6 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

In the preceding example, there are a number of HTML+TIME attributes, such as BEGIN and DUR, that control the progression and timing of the transition. These properties are examples of attributes that are common to all HTML+TIME transitions. These attributes and others will be explored in greater detail in later sections of this article. Notice that the CSS transition has a property of spokes that is set to a value of 8. This is an example of a property that is specific to the CSS transition being used. For a complete list of CSS transitions, see Visual Filters and Transitions Reference and for an overview on CSS transitions in general see Introduction to Filters and Transitions. In addition, the example shown in the What Is Needed To Apply a Transition section demonstrates many of the CSS transitions being used with HTML+TIME. The examples in this article only use HTML+TIME specific transitions. However, it is important to note that the code used in this article to control HTML+TIME specific transitions can also be used with CSS transitions.

You can apply more than one t:TRANSITIONFILTER and, therefore, more than one type of transition, to a given object. The following example shows how to apply multiple transitions simultaneously to renderable content.

<HTML XMLNS:t = "urn:schemas-microsoft-com:time">
<HEAD>
<STYLE>
.time {behavior: url(#default#time2);}
</STYLE>
<LINK REL="stylesheet" HREF="../common/samples/samples.css" TYPE="text/css">
<?import namespace = t urn = "urn:schemas-microsoft-com:time"
implementation = "#default#time2" />
</HEAD>
<BODY>
<t:TRANSITIONFILTER BEGIN="oDiv.begin" TYPE="barWipe" DUR="5"
TARGETELEMENT="oDiv"/>
<t:TRANSITIONFILTER BEGIN="oDiv.begin" TYPE="fade" DUR="5"
TARGETELEMENT="oDiv"/>
<DIV CLASS="time" DUR="8" ID="oDiv"
STYLE="width:535px;">This div has fade and barwipe types applied.</DIV>
</BODY>
</HTML>
This feature requires Microsoft?Internet Explorer 6 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

The two t:TRANSITIONFILTER elements in the preceding example both apply to the same media element (in this case a DIV) at the same time. Of course, these t:TRANSITIONFILTER elements could have been started on the time line at any time relative to one another, which could cause a variety of visual effects. In addition to the TYPE attribute, the t:TRANSITIONFILTER elements each have the BEGIN and DUR attributes. These are among many important attributes that are discussed in the sections ahead.

BEGIN

The BEGIN element determines when to begin the active period of the t:TRANSITIONFILTER. The duration of this active period is set by the DUR property (see DUR later in this article). Because the active period of the t:TRANSITIONFILTER element is finite, it is important to coordinate the active period of the t:TRANSITIONFILTER with the active period of the element that has the t:TRANSITIONFILTER applied to it. For example, the following code snippets show a t:TRANSITIONFILTER beginning at the same time as the element that it is applied to.

Begin relative to the element.

<t:MEDIA ID="oMedia" ...>
<t:TRANSITIONFILTER BEGIN="oMedia.begin" ... />
</t:MEDIA>

Begin at the same absolute time.

<t:MEDIA BEGIN="3" ... >
<t:TRANSITIONFILTER BEGIN="3" ... />
</t:MEDIA>

Begin relative to an event.

<t:MEDIA BEGIN="oButton.click" ... >
<t:TRANSITIONFILTER BEGIN="oButton.click" ... />
</t:MEDIA>

For a complete list of possible values for the BEGIN attribute, see the BEGIN documentation.

If the active periods of the t:TRANSITIONFILTER and the applied content do not overlap, then no transition occurs. For example, no transition would be visible in the following example.

<t:MEDIA BEGIN="O" DUR="3" ... >
<t:TRANSITIONFILTER BEGIN="4" ... />
</t:MEDIA>

In the preceding example, the media element begins at zero seconds and is active for three seconds. The t:TRANSITIONFILTER that is applied to the media element does not begin until four seconds so no transition would occur.

It is common to begin a t:TRANSITIONFILTER element at the beginning or close to the end of the active period of a transition element in order to transition the media in or out. However, if the t:TRANSITIONFILTER begins in the middle of the active period of a timed element or the active periods of the t:TRANSITIONFILTER element and timed element partially overlap, a variety of generally undesirable results can occur. For more information, see MODE later in this article. One way to ensure that the transition begins at the correct time is to have the parent element that is to be transitioned have a TIMECONTAINER attribute value of par. An example of this would be the following:

<t:MEDIA TIMECONTAINER="par" BEGIN="4" DUR="indefinite" ... >
<t:TRANSITIONFILTER ... />
</t:MEDIA>

As you can see, the t:TRANSITIONFILTER element does not even need to include the BEGIN attribute because it is on its parent time line and starts as soon as its parent.

Note  By default, time container elements end as soon as their child elements end on the time line. If you desire the parent element to persist beyond this time, you must specify a DUR attribute value for the parent.

DUR

The DUR attribute determines the duration of the t:TRANSITIONFILTER element. The longer the duration of the t:TRANSITIONFILTER element, the slower the transition proceeds. The default value for the DUR attribute is 1s (1 second). The following example shows how to make two identical DIV elements transition in when a button is clicked. The first DIV has a t:TRANSITIONFILTER applied to it with a DUR equal to one second, while the next DIV has a t:TRANSITIONFILTER applied to it with a DUR equal to three seconds. Because of this, the first DIV transitions three times as fast as the second one.

<HTML XMLNS:t = "urn:schemas-microsoft-com:time">
<HEAD>
<STYLE>
.time    {behavior: url(#default#time2);}
</STYLE>
<?import namespace = t urn = "urn:schemas-microsoft-com:time"
implementation = "#default#time2" />
</HEAD>
<BODY>
<INPUT TYPE="button" ID="oBeginRace" VALUE="Begin Race">
<DIV BEGIN="oBeginRace.click" DUR="8" CLASS="time" ID="oDiv1"
STYLE="width:600px;height:100px;background-color:gray">
First DIV
<t:TRANSITIONFILTER BEGIN="oBeginRace.click" TYPE="barWipe" DUR="1"/>
</DIV>
<DIV BEGIN="oBeginRace.click" DUR="8" CLASS="time" ID="oDiv2"
STYLE="width:600px;height:100px;background-color:gray">
Second DIV
<t:TRANSITIONFILTER BEGIN="oBeginRace.click" TYPE="barWipe" DUR="3"/>
</DIV>
</BODY>
</HTML>
This feature requires Microsoft?Internet Explorer 6 or later. Click the following icon to install the latest version. Then reload this page to view the sample.
Note  The t:TRANSITIONFILTER cannot extend the active period of the transition content. The transition content disappears when the transition content active period has expired regardless of the duration of the t:TRANSITIONFILTER active period.

MODE

The MODE attribute specifies whether the transition element transitions in or out. The legal value of in indicates that the transition content becomes more visible as the transition progress increases, and out indicates that the transition content becomes less visible as the transition progress increases.

Usually when the MODE attribute is set to the value of in, which is the default, the transition is tied to the beginning of a content element's active period. In this way, the media element appears to transition into view. Typically a t:TRANSITIONFILTER with a MODE value of out is applied to the end of an element's active period. This makes the media transition out of view. The following example shows a DIV element that transitions in, stays visible for two seconds, and then transitions out.

<HTML XMLNS:t = "urn:schemas-microsoft-com:time">
<HEAD>
<STYLE>
.time    {behavior: url(#default#time2);}
</STYLE>
<?import namespace = t urn = "urn:schemas-microsoft-com:time"
implementation = "#default#time2" />
</HEAD>
<BODY>
<DIV STYLE="width:270px" CLASS="time" DUR="8" ID="oDiv">
<t:TRANSITIONFILTER BEGIN="oDiv.begin" DUR="3" TYPE="clockWipe"/>
<t:TRANSITIONFILTER BEGIN="oDiv.end-3" DUR="3" MODE="out" TYPE="fade"/>
This DIV Transitions In, Stays For Two Seconds, And Then Transitions Out.
</DIV>
</BODY>
</HTML>
This feature requires Microsoft?Internet Explorer 6 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

As can be seen from the previous example, the MODE attribute does not automatically tie the transitionFilter to the beginning or end of the media. Authors can use the begin attribute on the transitionFilter to indicate the begin time for the transitionFilter.

You can apply a transition to a media element at any time during its active period. If MODE is set to in and the t:TRANSITIONFILTER is applied to the timed element in the middle of its active period, then the timed element disappears for a moment and transitions in. If MODE is set to out, then the media element transitions out, be not visible for a moment, and then immediately reappear. If MODE is set to in and the t:TRANSITIONFILTER is applied to the timed element in the middle of its active period, then the timed element disappears for a moment and then transitions in. If MODE is set to out, then the media element transitions out, is not visible for a moment, and then immediately reappears. The following example shows the effect of transitioning out a media element in the middle of the media element active period.

<HTML XMLNS:t = "urn:schemas-microsoft-com:time">
<HEAD>
<STYLE>
.time    {behavior: url(#default#time2);}
</STYLE>
<LINK REL="stylesheet" HREF="../common/samples/samples.css" TYPE="text/css">
<?import namespace = t urn = "urn:schemas-microsoft-com:time"
implementation = "#default#time2" />
</HEAD>
<BODY>
<DIV STYLE="width:270px" CLASS="time" DUR="8" ID="oDiv">
<t:TRANSITIONFILTER BEGIN= "oDiv.begin" DUR="3" TYPE="clockWipe"/>
<!-- The out TRANSITIONFILTER begins immediately -->
<t:TRANSITIONFILTER BEGIN="oDiv.begin" DUR="3" MODE="out" TYPE="fade"/>
This DIV transitions out in the middle of its active period.
</DIV>
</BODY>
</HTML>
This feature requires Microsoft?Internet Explorer 6 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

Progress Control Attributes

There are a number of attributes that enable control over the progress of the transition using the t:TRANSITIONFILTER. These include the FROM, TO, BY, CALCMODE, and VALUES attributes. All of these attributes are optional. They are covered in the sections that follow.

FROM, TO, and BY

The FROM attribute specifies the starting progress value of the transition. Legal values are real numbers in the range of 0.0-1.0. For example, to begin a transition with the destination content to make a transition in by 30%, you would specify a value for FROM of 0.3.

The TO and BY attributes specify the amount of progress through the transition at which to end progress of the transition. Both of these attributes have legal values in the range of 0.0-1.0. The by attribute specifies the relative offset value of the progress from the value of the from attribute. For example, if from has a value of 0.2 and by has a value of 0.5, then the transition starts at a progress of 20% and ends at a progress of 70%. In contrast, the TO attribute specifies the end of progress directly. If the from attribute is set to a value of 0.2 and the to attribute is set to a value of 0.5, then the transition starts at a progress of 20% and ends at a progress of 50%.

The following example shows how to use the FROM and TO attributes to begin a transition 50% through its progress and end progress at 80%.

<HTML XMLNS:t = "urn:schemas-microsoft-com:time">
<HEAD>
<STYLE>
.time    {behavior: url(#default#time2);}
</STYLE>
<LINK REL="stylesheet" HREF="../common/samples/samples.css" TYPE="text/css">
<?import namespace = t urn = "urn:schemas-microsoft-com:time"
implementation = "#default#time2" />
</HEAD>
<BODY>
<DIV STYLE="width:270px;height:200px;" CLASS="time" DUR="8" ID="oDiv">
<t:TRANSITIONFILTER BEGIN="oDiv.begin" DUR="5" TYPE="ellipseWipe" FROM="0.6"
TO="0.8"/>
This transition begins at 50% progress and ends at 80% because FROM is set to
0.5 and TO is set to 0.8
</DIV>
</BODY>
</HTML>
This feature requires Microsoft?Internet Explorer 6 or later. Click the following icon to install the latest version. Then reload this page to view the sample.
Note  In the preceding example the transition still takes five seconds even though the progress of the transition begins at 50% and ends at 80%.

As the previous sample shows, once the transition finishes, the transitioning element rapidly displays. In order to lock the appearance of the element at the value specified by the TO attribute, set the FILL attribute to a value of freeze inside of the t:TRANSITIONFILTER element. The following example is similar to the preceding one except that the FILL attribute is set inside of the t:TRANSITIONFILTER element. 

<HTML XMLNS:t = "urn:schemas-microsoft-com:time">
<HEAD>
<STYLE>
.time    {behavior: url(#default#time2);}
</STYLE>
<LINK REL="stylesheet" HREF="../common/samples/samples.css" TYPE="text/css">
<?import namespace = t urn = "urn:schemas-microsoft-com:time"
implementation = "#default#time2" />
</HEAD>
<BODY>
<DIV STYLE="width:270px;height:200px;" CLASS="time" DUR="8" ID="oDiv">
<t:TRANSITIONFILTER BEGIN="oDiv.begin" FILL="freeze" DUR="5" TYPE="ellipseWipe" FROM="0.6"
TO="0.8"/>
This transition begins at 50% progress and ends at 80% because FROM is set to
0.5 and TO is set to 0.8
</DIV>
</BODY>
</HTML>
This feature requires Microsoft?Internet Explorer 6 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

VALUES and CALCMODE

The VALUES attribute specifies a semicolon-delimited list of one or more values indicating the progress of the transition. This attribute can provide more precise control over the progress of a transition than a combination of the from, to, and by attributes and overrides those attributes if they are specified.

The transition effects of FROM, TO, BY, and VALUES can be modified with the CALCMODE attribute. The CALCMODE attribute specifies the interpolation mode for the progress of the t:TRANSITIONFILTER. There are two possible values for CALCMODE: discrete and linear. When the discrete value is specified, the progress of the transition jumps from one value to the next without any interpolation. This gives the transition a progress that appears to shake. The default value of linear and the transition progresses smoothly from one value to the next. The following is an example that shows two identical time elements that have the same VALUES attribute but one has a CALCMODE value of linear and the other has discrete.

<HTML XMLNS:t = "urn:schemas-microsoft-com:time">
<HEAD>
<STYLE>
.time    {behavior: url(#default#time2);}
</STYLE>
<?import namespace = t urn = "urn:schemas-microsoft-com:time"
implementation = "#default#time2" />
</HEAD>
<BODY>
<t:TRANSITIONFILTER BEGIN="oImage1.begin" TYPE="barWipe" DUR="5"
TARGETELEMENT="oImage1" VALUES=".1;.17;.27;.37;.47;.56;.65;.71;.82;.92;1.0"
CALCMODE="discrete"/>
<t:TRANSITIONFILTER BEGIN="oImage2.begin" TYPE="barWipe" DUR="5"
TARGETELEMENT="oImage2" VALUES=".1;.17;.27;.37;.47;.56;.65;.71;.82;.92;1.0"
CALCMODE="linear"/>
<INPUT TYPE="button" ID="oStartButton" VALUE="Start Transition">
<P>
<IMG SRC="img.gif" CLASS="time" begin="oStartButton.click" ID="oImage1"
STYLE="width:400px;">
<P>
<IMG SRC="img.gif" CLASS="time" begin="oStartButton.click" ID="oImage2"
STYLE="width:400px;">
</BODY>
</HTML>
This feature requires Microsoft?Internet Explorer 6 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

REPEATCOUNT and REPEATDUR

The repeatCount and REPEATDUR attributes enable the transition to repeat itself a specified number of times. The repeatCount attribute specifies a number of times that the transition repeats. This number does not have to be a whole number, and if it is not, the transition progresses a fractional amount, as in the following example. The REPEATDUR attribute specifies the amount of time in which the transition repeats. Therefore, the number of times the media element repeats is equal to the time specified by REPEATDUR divided by the value of the DUR attribute of the t:TRANSITIONFILTER. Any remainder is expressed as a partial transition. It is important to note that neither repeatCount nor REPEATDUR can extend the active duration of a media element. When the duration of the media element expires, the media element disappears even if the repeatCount or REPEATDUR attributes specify more repetitions.

The following example shows how to use the REPEATCOUNT attribute to repeat a transition on a time element. The REPEATCOUNT attribute inside the t:TRANSITIONFILTER element is set to indefinite. However, the time element that follows only repeats for the duration of its active period (in this case, seven seconds).

.
.
.
<!-- The FOR and TO attributes used to make only outer DIV transition. -->
<t:TRANSITIONFILTER REPEATCOUNT="indefinite" TYPE="ellipseWipe" DUR="3"
FROM="0.28" TO="1.0" TARGETELEMENT="oDiv1"/>
<IMG SRC="img.gif" CLASS="time" ID="oDiv1" DUR="7"
STYLE="width:400px;">
.
.
.
This feature requires Microsoft?Internet Explorer 6 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

Summary

By using the components outlined in this article, you are ready to use transitions in your Web pages. However, this is only the starting point. You can make your transitions even more interactive using scripting. The t:TRANSITIONFILTER, along with all of its associated attributes, is accessible through the Document Object Model (DOM). Combining scripting with all of the other features of HTML+TIME provides even more flexibility than the examples in this article. Of course, there are other ways to create transitions, but perhaps the greatest power of this specific technology is its simplicity and compact nature. This makes HTML+TIME transitions a good choice for simple transition applications.

Related Topics