autoReverse property

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

Syntax

JScript
object.autoReverse = bReversebReverse = object.autoReverse

Property values

Type: Object

A Boolean that specifies or receives one of the following values.

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."

Examples

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

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

<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>

See also

transitionFilter

animate

animateColor

animateMotion

animation

audio

excl

img

media

par

ref

seq

set

video

Reference

time2

Conceptual

Introduction to HTML+TIME