Latest web development tutorials
 

TransitionEvent elapsedTime Property

< Event Object

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 »

Definition and Usage

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.


Browser Support

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

Property
elapsedTime Yes 10.0 Yes Yes Yes

Syntax

event.elapsedTime

Technical Details

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

Related Pages

HTML DOM reference: The transitionend Event

HTML DOM reference: TransitionEvent propertyName Property

CSS reference: CSS3 transition Property

CSS reference: CSS3 transition-duration Property


< Event Object