AUTOREVERSE Attribute | autoReverse Property

  • Article

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

Sets or gets whether the timeline on an element begins playing in reverse immediately after it completes in the forward direction.

Syntax

HTML <ELEMENT AUTOREVERSE = bReverse... >
Scripting [ bReverse = ] object.autoReverse

Possible Values

bReverse A Boolean that specifies or receives one of the following values.
true
Timeline plays in the forward direction until it completes, and then immediately plays in the reverse direction.
false
Default. Timeline does not play in the reverse direction after it finishes playing in the forward direction.

The property is read/write. The property has a default value of false.

Remarks

The property cannot be modified in script after the onload event fires on the document body.

When you set autoReverse to true on a video file, the file freezes at the frame on which the reverse occurred—that is, on the last frame played.

Audio files do not play in reverse if autoReverse is set; they simply end.

If the element has a repeatCount greater than one, and autoReverse is set to true, the element is assumed to have completed one loop through the timeline when it has played forward one time and backward one time.

On some systems, this attribute is referred to as "Play forward, then backward."

Example

The following example shows the current loop iteration of an animateMotion element with the autoReverse attribute set to true.

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

<SCRIPT LANGUAGE="JScript">
function fnRepeat()
{
    oCount.innerText = "Current iteration: " + 
        (oAnim.currTimeState.repeatCount + 1);
        // Add one because repeatCount is zero-based.
}
</SCRIPT>
</HEAD>

<BODY TOPMARGIN=0 LEFTMARGIN=0 BGPROPERTIES="FIXED" BGCOLOR="#FFFFFF"
    LINK="#000000" VLINK="#808080" ALINK="#000000">

<DIV ID="oCount">Current iteration: 1</DIV>

<DIV ID="oDiv" CLASS="time" 
    STYLE="position:absolute; 
    top:25px; left:50px;
    height:100px; width:100px;
    background-color:blue;"
</DIV>

<t:ANIMATEMOTION ID="oAnim" targetElement="oDIV"
    to="150,0" dur="1" autoReverse="true" repeatCount="5"
    onrepeat="fnRepeat()"/>

</BODY>
</HTML>

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/behaviors/autoreverse.htm

Applies To

t:TRANSITIONFILTER, t:ANIMATE, t:ANIMATECOLOR, t:ANIMATEMOTION, t:ANIMATION, t:AUDIO, t:EXCL, t:IMG, t:MEDIA, t:PAR, t:REF, t:SEQ, t:SET, time2, t:VIDEO

See Also

Introduction to HTML+TIME, time2