This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.
The Animation.startTime
property of the Animation
interface returns or sets the scheduled time when an animation's playback should begin.
An animation’s start time is the time value of its DocumentTimeline
when its target KeyframeEffect
is scheduled to begin playback. An animation’s start time is initially unresolved.
Syntax
// getting an animation's startTime var animationStartedWhen = animation.startTime; // setting an animation's startTime animation.startTime = 300;
Value
A number representing the current time in milliseconds, or null
.
Examples
In the Running on Web Animations API example, the we can sync all new animated cats by giving them all the same startTime
as the original running cat:
var catRunning = document.getElementById ("withWAAPI").animate(keyframes, timing); /* A function that makes new cats. */ function addCat(){ var newCat = document.createElement("div"); newCat.classList.add("cat"); return newCat; } /* This is the function that adds a cat to the WAAPI column */ function animateNewCatWithWAAPI() { // make a new cat var newCat = addCat(); // animate said cat with the WAAPI's "animate" function var newAnimationPlayer = newCat.animate(keyframes, timing); // set the animation's start time to be the same as the original .cat#withWAAPI newAnimationPlayer.startTime = catRunning.startTime; // Add the cat to the pile. WAAPICats.appendChild(newCat); }
Specifications
Specification | Status | Comment |
---|---|---|
Web Animations The definition of 'Animation.startTime' in that specification. |
Working Draft | Editor's draft. |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 39.0 | 48 (48) | No support | No support | No support |
Feature | Android | Android Webview | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|
Basic support | No support | 39.0 | 48.0 (48) | No support | No support | No support | 39.0 |
See also
- Web Animations API
Animation
Animation.currentTime
for the current time of the animation.