AnimationEvent elapsedTime Property
Example
How many seconds have the animation been running:
const div = document.getElementById("myDIV");
div.addEventListener("animationiteration", myRepeatFunction);
function myRepeatFunction(event) {
this.innerHTML = "Elapsed time: " + event.elapsedTime;
}
Try it Yourself »
Description
The elapsedTime property returns the number of seconds the animation has been running, when an animation event occurs.
The elapsedTime property always returns "0" for the animationstart event.
The elapsedTime value is not affected if the animation is paused.
The elapsedTime property is read-only.
Animation Events
| Event | Occurs When |
|---|---|
| animationstart | A CSS animation has started |
| animationend | A CSS animation has completed |
| animationiteration | A CSS animation is repeated |
Animation Properties
| Property | Description |
|---|---|
| animationName | The name of the animation |
| elapsedTime | The number of seconds an animation has been running |
| pseudoElement | The name of the pseudo-element of the animation |
See Also:
The Animation Event Object
The Style animation Property
Tutorial:
Syntax
event.elapsedTime
Technical Details
| Return Value: | A Number. The number of seconds an animation has been running. |
|---|---|
| DOM Version: | DOM Level 3 Animation Events |
Browser Support
event.elapsedTime is a DOM Level 3 (2004) feature.
It is fully supported in all modern browsers:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Yes | Yes | Yes | Yes | Yes | 11 |
