TransitionEvent elapsedTime Property

DOM Events TransitionEvent

Definition and Usage

When transitionend EventWhen this occurs, the elapsedTime property returns the number of seconds the transition has been running.

Note:If the transition is paused (using the CSS property transition-delay), the return value is not affected.

Note:This property is read-only.

Example

Determine how many seconds the transition ran:

document.getElementById("myDIV").addEventListener("transitionend", myFunction);
function myFunction(event) {
  this.innerHTML = "Transition lasted: " + event.elapsedTime + " seconds";
}

Try It Yourself

Syntax

event.elapsedTime

Technical Details

Return Value: Numeric value representing the number of seconds the transition has been running.

Browser Support

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

Property Chrome IE Firefox Safari Opera
elapsedTime Support 10.0 Support Support Support

Related Pages

HTML DOM Reference Manual:transitionend Event

HTML DOM Reference Manual:TransitionEvent propertyName Property

CSS Reference Manual:CSS3 transition Property

CSS Reference Manual:CSS3 transition-duration Property

DOM Events TransitionEvent