Member |
Description |
accelerate |
Sets or retrieves a value that applies an acceleration to the element's local timeline. |
autoReverse |
Sets or retrieves whether the timeline on an element will immediately begin playing in reverse after completing in the forward direction. |
begin |
Sets or retrieves the delay time before the timeline begins playing on the element. |
beginAfter |
Sets or retrieves a value indicating that the timeline of an element starts when the referenced element ends. |
beginElement |
Starts the element on the timeline. |
beginEvent |
Sets or retrieves a value that starts the timeline of an element when the referenced event occurs. |
beginWith |
Sets or retrieves a value that starts an element's timeline at the same time as the referenced element. |
currTime |
Retrieves a value indicating the current time along the simple duration, as defined by the element's dur or end attribute. |
decelerate |
Sets or retrieves a value that applies a deceleration to the end of a simple duration. |
dur |
Sets or retrieves a value indicating the amount of time for which the element will remain active or displayed. |
end |
Sets or retrieves a value indicating the end time for the element, or the end of the simple duration when the element is set to repeat. |
endElement |
Stops the element on the timeline. |
endEvent |
Sets or retrieves a value indicating that the timeline of an element ends immediately when the referenced event occurs, regardless of the element's repeat count or repeatDur property. |
endHold |
Sets or retrieves whether an element will remain active if its timeline ends before the timeline on its parent element ends. |
eventRestart |
Sets or retrieves whether the element should restart if a beginEvent call occurs while the local timeline is already running. |
localTime |
Retrieves a value indicating the current time along the local duration, as defined by the element's repeat or repeatDur attribute. |
onbegin |
Fires when the timeline starts on an element. |
onend |
Fires when the timeline stops on an element. |
onOffBehavior |
Retrieves an object indicating whether the specified Microsoft DirectAnimation behavior is currently running. |
onrepeat |
Fires when the timeline repeats on an element, beginning with the second iteration. |
onreverse |
Fires when the timeline on an element begins to play backward. |
pause |
Pauses the timeline on the HTML document. |
progressBehavior |
Retrieves an object indicating the progress of the specified Microsoft DirectAnimation behavior. |
repeat |
Sets or retrieves the number of times an element's timeline will repeat. |
repeatDur |
Sets or retrieves the number of seconds an element's timeline will repeat. |
resume |
Resumes a paused timeline on the HTML document. |
syncBehavior |
Sets or retrieves the synchronization rules for the element's timeline. |
syncTolerance |
Retrieves the time variance allowed on a timeline with locked synchronization. |
timeAction |
Sets or retrieves what action will be taken on the element while the timeline is active. |
timeline |
Sets or retrieves the type of timeline associated with an HTML element. |
timelineBehavior |
Retrieves an object containing the timeline behavior associated with the specified object. |
timeStartRule |
Sets or retrieves the point at which the document's timeline begins. |
Figure 3 timeAction Values
Value |
Description |
display |
The element displays when the timeline is active, and disappears when the timeline is inactive. As the element changes between active and inactive states, the surrounding HTML elements dynamically reflow within the page. |
none |
No action taken. This is useful for time grouping when the parent element itself should not do anything in response to timing. |
onOff |
The element's on property is toggled between true and false over time. If no on property exists for the element, nothing happens. |
style |
The element is displayed with the inline style when the timeline is active, and is displayed without the inline style when the timeline is inactive. If no inline style is defined for this element, nothing happens. |
visibility |
The element's style.visibility property displays the element when the timeline is active, and makes the element disappear when the timeline is inactive. The surrounding HTML elements will not reflow as a result of the local element changing between active and inactive states. |
Figure 5 A Sequential Timeline
<HTML>
<HEAD>
<STYLE>
.time { behavior:url(#default#time); }
</STYLE>
</HEAD>
<BODY>
<DIV CLASS="time" t:timeline="seq">
<P class="time" t:dur="1">
This appears for one second and goes away
</P>
<P class="time" t:dur="1">
This appears after one second, remains visible for one second
and goes away
</P>
<P class="time" t:dur="1">
This appears after two seconds, remains visible for one second
and goes away
</P>
</DIV>
</BODY>
</HTML>
Figure 6 Controlling a Timeline
<HTML>
<HEAD>
<STYLE>
.time { behavior:url(#default#time); }
</STYLE>
</HEAD>
<BODY id=main>
<INPUT type="button" value="resume" onclick="main.resume()">
<INPUT type="button" value="pause" onclick="main.pause()">
<DIV CLASS="time" t:timeline="seq" t:dur="3" t:repeat="5">
<P class="time" t:dur="1">
This appears for one second and goes away
</P>
<P class="time" t:dur="1">
This appears after one second, remains visible for one second
and goes away
</P>
<P class="time" t:dur="1">
This appears after two seconds, remains visible for one second
and goes away
</P>
</DIV>
</BODY>
</HTML>
Figure 7 A Parallel Timeline
<HTML>
<HEAD>
<STYLE>
.time { behavior:url(#default#time); }
</STYLE>
</HEAD>
<BODY id=main>
<INPUT type="button" value="resume" onclick="main.resume()">
<INPUT type="button" value="pause" onclick="main.pause()">
<DIV CLASS="time" t:timeline="par" t:dur="4" t:repeat="5">
<P class="time" t:begin="1" t:dur="3">
This appears after one second
</P>
<P class="time" t:begin="2" t:dur="2">
This appears after two seconds
</P>
<P class="time" t:begin="3" t:dur="1">
This appears after three seconds and in one second everything
disappears and then repeats
</P>
</DIV>
</BODY>
</HTML>
Figure 8 HTML+TIME XML Elements
Value |
Description |
ANIMATION |
Defines a timed animation element in an HTML document. |
AUDIO |
Defines a timed audio element in an HTML document. |
IMG |
Defines a timed image element in an HTML document. |
MEDIA |
Defines a generic, timed media element in an HTML document. |
PAR |
Defines a new timeline container in an HTML document. All HTML descendants of this element will have independent or parallel timing. |
SEQ |
Defines a new timeline container in an HTML document for sequentially timed elements. |
VIDEO |
Defines a timed video element in an HTML document. |
Figure 9 Using the SEQ Element
<HTML>
<HEAD>
<STYLE>
.time { behavior:url(#default#time); }
</STYLE>
<XML:NAMESPACE PREFIX="t" />
</HEAD>
<BODY>
<t:SEQ class="time" t:dur="3" t:repeat="5">
<P class="time" t:dur="1">
This appears for one second and goes away
</P>
<P class="time" t:dur="1">
This appears after one second, remains visible for one second
and goes away
</P>
<P class="time" t:dur="1">
This appears after two seconds, remains visible for one second
and goes away
</P>
</t:SEQ>
</BODY>
</HTML>