AnimationEvent()
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The AnimationEvent() constructor returns a newly created AnimationEvent, representing an event in relation with an animation.
Syntax
animationEvent = new AnimationEvent(type, {animationName: aPropertyName, elapsedTime : aFloat, pseudoElement: aPseudoElementName});
Parameters
The AnimationEvent() constructor also inherits arguments from Event().
type-
A
DOMStringrepresenting the name of the type of theAnimationEvent. It is case-sensitive and can be:'animationstart','animationend', or'animationiteration'. -
animationNameOptional -
A
DOMStringcontaining the value of theanimation-nameCSS property associated with the transition. It defaults to"". -
elapsedTimeOptional -
A
floatgiving 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,elapsedTimeis0.0unless there was a negative value foranimation-delay, in which case the event will be fired withelapsedTimecontaining(-1 * delay). It defaults to0.0. -
pseudoElementOptional -
Is a
DOMString, starting with"::", containing the name of the pseudo-element the animation runs on. If the animation doesn't run on a pseudo-element but on the element itself, specify an empty string:"". It defaults to"".
Return value
A new AnimationEvent, initialized per any provided options.
Specifications
Browser compatibility
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
AnimationEvent |
43 |
14 |
23 |
No |
No |
9.1
6
|
43 |
43 |
23 |
No |
9.3
6
|
4.0 |
See also
- Using CSS animations
- Animation-related CSS properties and at-rules:
animation,animation-delay,animation-direction,animation-duration,animation-fill-mode,animation-iteration-count,animation-name,animation-play-state,animation-timing-function,@keyframes - The
AnimationEventinterface it belongs to.
© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/AnimationEvent/AnimationEvent