decelerate property

Sets or gets a value that applies a deceleration to the end of a simple duration.

Syntax

JScript
object.decelerate = iPercent
iPercent = object.decelerate

 

Property values

Type: Integer

A floating-point number that specifies a value between 0 and 1, which represents the portion of the timeline over which the deceleration is applied. The timeline refers to that timeline associated with a particular HTML element, such as a div or a span, instead of the timeline associated with the entire document.

Remarks

The simple duration is the segment of time from when the element begins playing until it completes one forward cycle of its behavior, excluding repetitions.

If the REPEATCOUNT attribute or the REPEATDUR attribute is set on an element, the deceleration occurs each time the element repeats.

The DECELERATE attribute is well-suited to animation content and behaviors. Setting this attribute to a nonzero value does not affect the duration of the timeline.

The sum of the values for the ACCELERATE attribute and the DECELERATE attribute must not exceed 1. If the individual values of the ACCELERATE attribute and the DECELERATE attribute are between 0 and 1, and the sum is greater than 1; then both attributes are ignored, and the timed element behaves as if neither attribute was specified.

This property is also called "ease-out" in some systems.

Examples

This example uses the decelerate element to display a decelerated timeline.

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


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

<?IMPORT namespace="t" implementation="#default#time2">
</HEAD>

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

<DIV ID="oDIV" CLASS="time"
    STYLE="position:absolute;top:75px;left:10px;height:50px;width:100px;
        background-color:yellow;text-align:center;font-color:black;
        font-size:large">Decelerating DIV
</DIV>

<t:ANIMATE targetElement="oDIV" attributeName="left" to="400" dur="4" decelerate="1"
    repeatCount="3"/>

</BODY>
</HTML>

See also

transitionFilter
animate
animateColor
animateMotion
animation
audio
excl
img
media
par
ref
seq
time2
video
Reference
accelerate
Conceptual
Introduction to HTML+TIME

 

 

Show: