KEYTIMES Attribute | keyTimes Property

Sets or retrieves a list of time values used to control the pacing of an animation.

Syntax

HTML <ELEMENT KEYTIMES = vTimes... >
Scripting object.keyTimes(val) [ = vTimes ]

HTML	<ELEMENT KEYTIMES = vTimes... >
Scripting	object.keyTimes(val) [ = vTimes ]

Possible Values

vTimes String that specifies or receives a semicolon-separated list of time values, representing a proportional offset into the simple duration of the animation element. Each successive time value in the list must be greater than or equal to the preceding time value. Valid time values are floating-point numbers between 0 and 1, inclusive.
The property is read/write. The property has no default value.

Remarks

Each time in the keyTimes list corresponds to a value in the VALUES attribute list. There must be exactly the same number of times in the keyTimes list as there are values in the VALUES attribute list.
For linear and spline animations, the first time value in the keyTimes list must be 0; the last time value in the list must be 1. The time associated with each value defines when that value is set; values are interpolated between the keyTimes specified.
For discrete animation, the first time value in the list must be 0. The time associated with each value defines when the value is set; the animation function uses that value until the next time defined in the keyTimes list.
The value of keyTimes is ignored if the CALCMODE attribute is set to paced.
When using keyTimes with the t:ANIMATEMOTION element, you must set the CALCMODE attribute to a value other than paced.

Example

This example demonstrates how to use the keySplines and keyTimes properties to set the pace of an animation. The keySplines property contains a list of Bezier control points to define the interval pacing of the animated DIV. The keyTimes property contains a list of time values to control the pacing of the animated DIV.

<HTML XMLNS:t="urn:schemas-microsoft-com:time">
<HEAD>
<TITLE>keyTimes / keySplines Properties</TITLE>
<?IMPORT namespace="t" implementation="#default#time2">
<STYLE>
.time{ behavior: url(#default#time2);}
.div1{position:absolute; top:195px; height:100px; width:150px;
background-color:yellow; text-align:center; font-size:large;
border:solid black 2px;}
</STYLE>
</HEAD>
<BODY TOPMARGIN=0 LEFTMARGIN=0 BGPROPERTIES="FIXED" BGCOLOR="#FFFFFF"
LINK="#000000" VLINK="#808080" ALINK="#000000">
<B>Simple timer:</B>
<SPAN id="Timer1" class="time" dur=".1" repeatCount="indefinite" fill="hold"
onrepeat="innerText=(oAnim.currTimeState.simpleTime);">0</SPAN>
<BR>
<B>Segment timer:</B>
<SPAN id="Timer2" class="time" dur=".1" repeatCount="indefinite" fill="hold"
onrepeat="innerText=(oAnim.currTimeState.activeTime);">0</SPAN>
<DIV id="t1" class="div1">How to use keyTimes and keySplines</DIV>
<t:animateMotion id="oAnim" begin="1;b1.click+1" dur="6s" autoReverse="true"
calcMode="spline" keySplines="0 1 .5 1;.5 1 0 1" keyTimes="0;.5;1"
values="25,0;250,50;500,0" targetElement="t1" fill="hold"/>
<P style="position:absolute;top:325px;">
<BUTTON id="b1"><B>Restart</B></BUTTON>
</P>
</BODY>
</HTML>

This feature requires Microsoft?Internet Explorer 5.5 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

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:TRANSITIONFILTER, t:ANIMATE, t:ANIMATECOLOR, t:ANIMATEMOTION