This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
The AnimationEvent.elapsedTime read-only property is a float giving the amount of time the animation has been running, in seconds, when this event fired, excluding any time the animation was paused. For an animationstart event, elapsedTime is 0.0 unless there was a negative value for animation-delay, in which case the event will be fired with elapsedTime containing (-1 * delay).
A float giving the amount of time in seconds.
| Specification |
|---|
| CSS Animations Level 1> # dom-animationevent-elapsedtime> |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | WebView Android | WebView on iOS | |
elapsedTime |
43 | 12 | 5 | 30 | 9 | 43 | 5 | 30 | 9 | 4.0 | 43 | 9 |
animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-play-state, animation-timing-function, @keyframes.AnimationEvent interface it belongs to.
© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/AnimationEvent/elapsedTime