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 |
|---|
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
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 |
