AnimationEvent elapsedTime Property

DOM Events AnimationEvent

Definition and Usage

The elapsedTime property returns the number of seconds the animation has run when an animation event occurs.

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

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

Note:This property is read-only.

Example

Determine how many seconds the animation has run:

var x = document.getElementById("myDIV");
x.addEventListener("animationiteration", myRepeatFunction);
function myRepeatFunction(event) {
  this.innerHTML = "Elapsed time: " + event.elapsedTime;
}

Try It Yourself

Syntax

event.elapsedTime

Technical Details

Return Value: Numeric value representing the number of seconds the animation runs.

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

Related Page

HTML DOM Reference Manual:animationstart Event

HTML DOM Reference Manual:animationiteration Event

HTML DOM Reference Manual:animationend Event

HTML DOM Reference Manual:AnimationEvent animationName Attribute

CSS Reference Manual:CSS3 Animation Attribute

CSS Reference Manual:CSS3 animation-duration Attribute

DOM Events AnimationEvent