Latest web development tutorials
 

AnimationEvent elapsedTime Property

< Event Object

Example

Find out how many seconds an animation has been running:

var x = document.getElementById("myDIV");
x.addEventListener("animationiteration", myRepeatFunction);

function myRepeatFunction(event) {
    this.innerHTML = "Elapsed time: " + event.elapsedTime;
}
Try it Yourself »

Definition and Usage

The elapsedTime property returns the number of seconds an animation has been running, when an animation event occurs.

Note: The return value is not affected if the animation is paused (by using the animation-delay CSS property).

Note: For the animationstart event, this property always returns "0".

This property is read-only.


Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
elapsedTime Yes 10.0 6.0 Yes Yes

Syntax

event.elapsedTime

Technical Details

Return Value: A Number, representing the number of seconds an animation has been running

Related Pages

HTML DOM reference: The animationstart Event

HTML DOM reference: The animationiteration Event

HTML DOM reference: The animationend Event

HTML DOM reference: AnimationEvent animationName Property

CSS reference: CSS3 animation Property

CSS reference: CSS3 animation-duration Property


< Event Object