TYPE Attribute | type Property

This topic documents a feature of HTML+TIME 2.0, which is obsolete as of Windows Internet Explorer 9.

Sets or gets the type of transition to be applied.

Sets or gets the type of transition to be applied.


Scripting [ sType = ] t:TRANSITIONFILTER.type

Possible Values

sType String that specifies or receives the name of the transition type that will be applied to renderable content. See the following table for possible values.

The property is read/write. The property has no default value.


type was introduced in Microsoft Internet Explorer 6.

This attribute is required and must be one of the transition families listed in the following table, or it must be an extended transition type provided by the user agent.

You can apply more than one transitionFilter to a given object. By doing this, you can apply more than one type of transition. This has the possible effect of multiple types of transitions occurring simultaneously to renderable content. See the following example.

If no subtype is specified, the default subtype associated with the transition type is used. The type starWipe is an exception; you must explicitly include the subtype of "fivePoint" for this transition to work.

Type Associated Subtypes
starWipe fivePoint (this must be specified)
barWipe leftToRight, topToBottom
barnDoorWipe vertical, horizontal
irisWipe rectangle, diamond
ellipseWipe circle
clockWipe clockwiseTwelve
fanWipe centerTop
snakeWipe topLeftHorizontal
spiralWipe topLeftClockwise
pushWipe fromLeft
slideWipe fromLeft
fade crossfade

Note You can also use Cascading Style Sheets (CSS) transitions as values for TYPE. See Using HTML+TIME Transitions for more information.


This example demonstrates the different transition type values and the possible subtype values that can be used with those type values. In addition, the effects of changing various other attributes of the transitionFilter is also demonstrated.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/behaviors/htmltime/transitions/mastersample/master_sample.htm

This example shows three DIVs that have two different transitions applied to them simultaneously.

<HTML XMLNS:t = "urn:schemas-microsoft-com:time">
    .time {behavior: url(#default#time2);}
<?import namespace = t urn = "urn:schemas-microsoft-com:time" 
implementation = "#default#time2" />

<t:transitionfilter type="barWipe" id="tran1" dur="3" 

<t:transitionfilter type="fade" id="tran1b" dur="3" 

<t:transitionfilter type="snakeWipe" id="tran2"  dur="3" 

<t:transitionfilter type="barnDoorWipe" id="tran2b"  dur="3" targetElement="secondDiv"
from="0" to="1"  CalcMode="linear"   mode="in" />

<DIV STYLE="height:170px;">
<DIV CLASS="time"  ID="firstDiv" STYLE="position:absolute; top:150px; 
left:20px; background-color:#3366CC; padding:10px; height:80; color:white;">
This div has fade and barwipe types applied.

<DIV CLASS="time" ID="secondDiv" STYLE="position:absolute; top:185px; 
left:60px; background-color:#FFCC00; padding:10px; height:80;">
This div has snakeWipe and barnDoorWipe types applied.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/behaviors/htmltime/transitions/typeEX1.html

Applies To


See Also

Introduction to HTML+TIME, Using HTML+TIME Transitions