TransitionEvent elapsedTime Property

Example

Find out how many seconds a transition has been running:

document.getElementById("myDIV").addEventListener("transitionend", myFunction);

function myFunction(event) {
this.innerHTML = "Transition lasted: " + event.elapsedTime + " seconds";
}

Try it Yourself »

Description

The elapsedTime property returns the number of seconds a transition has been running, when a transitionend event occurs.

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

This property is read-only.

Syntax

event.elapsedTime

Technical Details

Return Value:	A Number, representing the number of seconds a transition has been running

HTML DOM reference: The transitionend Event

HTML DOM reference: TransitionEvent propertyName Property

CSS reference: CSS3 transition Property

CSS reference: CSS3 transition-duration Property

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