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

Tutorial:

CSS3 Animations

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

❮ Previous Event Properties Next ❯

码农教程 - 一技在手,衣食无忧!