DECELERATE Attribute | decelerate Property | Internet Development Index |
Sets or retrieves a value that applies a deceleration to the end of a simple duration.
Syntax
HTML <ELEMENT DECELERATE = fRate... > Scripting object.decelerate [ = fRate ]
Possible Values
fRate Floating-point number that specifies a value between 0 and 1 that 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 span), rather than the timeline associated with the entire document.
0 Default. Deceleration is not applied to the element's timeline. The property is read/write. The property has a default value of 0.
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 or REPEATDUR attribute is set on an element, the deceleration occurs each time the element repeats.
The DECELERATE attribute is especially 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 and DECELERATE attributes must not exceed 1. If the individual values of the ACCELERATE and DECELERATE attributes are between 0 and 1 and the sum is greater than 1, then both the ACCELERATE and DECELERATE attributes will be ignored and the timed element will behave as if neither attribute was specified.
This property is also commonly known as "ease-out" in some systems.
Example
This example uses the decelerate element to display a decelerated timeline.
<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>
Standards Information
This property is defined in Synchronized Multimedia Integration Language (SMIL) 2.0 .
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, time2, t:VIDEO
See Also
accelerate, Introduction to HTML+TIME