AnimationEvent - Web APIs

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The AnimationEvent interface represents events providing information related to animations.

  <div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveAspectRatio="xMinYMin meet"><a xlink:href="/docs/Web/API/Event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="38.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Event</text></a><polyline points="76,25  86,20  86,30  76,25" stroke="#D4DDE4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#D4DDE4"/><a xlink:href="/docs/Web/API/AnimationEvent" target="_top"><rect x="116" y="1" width="140" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text  x="186" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">AnimationEvent</text></a></svg></div>

  a:hover text { fill: #0095DD; pointer-events: all;}

Constructor

AnimationEvent(): Creates an AnimationEvent event with the given parameters.

Properties

Also inherits properties from its parent Event.

AnimationEvent.animationName Read only: Is a DOMString containing the value of the animation-name that generated the animation.
AnimationEvent.elapsedTime Read only: 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).
AnimationEvent.pseudoElement Read only: 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, an empty string: ''.

Methods

Also inherits methods from its parent Event.

AnimationEvent.initAnimationEvent(): Initializes a AnimationEvent created using the deprecated Document.createEvent("AnimationEvent") method.

Specifications

Specification	Status	Comment
CSS Animations The definition of 'AnimationEvent' in that specification.	Working Draft	Initial definition.

Browser compatibility

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`AnimationEvent` Experimental	Chrome Full support 43 Full support 43 No support 1 — 70 Prefixed Prefixed Implemented with the vendor prefix: WebKit	Edge Full support 12	Firefox Full support 6	IE Full support 10	Opera Full support 30 Full support 30 No support 15 — 57 Prefixed Prefixed Implemented with the vendor prefix: WebKit No support 12.1 — 15 Full support 12 Prefixed Prefixed Implemented with the vendor prefix: o	Safari Full support 9.1 Full support 9.1 Full support 4 Prefixed Prefixed Implemented with the vendor prefix: WebKit	WebView Android Full support 43 Full support 43 No support 1 — 70 Prefixed Prefixed Implemented with the vendor prefix: WebKit	Chrome Android Full support 43 Full support 43 No support 18 — 70 Prefixed Prefixed Implemented with the vendor prefix: WebKit	Firefox Android Full support 6	Opera Android Full support 30 Full support 30 No support 14 — 49 Prefixed Prefixed Implemented with the vendor prefix: WebKit No support 12.1 — 14 Full support 12 Prefixed Prefixed Implemented with the vendor prefix: o	Safari iOS Full support 9.3 Full support 9.3 Full support 3.2 Prefixed Prefixed Implemented with the vendor prefix: WebKit	Samsung Internet Android Full support 4.0 Full support 4.0 No support 1.0 — 10.0 Prefixed Prefixed Implemented with the vendor prefix: WebKit
`AnimationEvent()` constructor Experimental	Chrome Full support 43	Edge Full support ≤79	Firefox Full support 23	IE No support No	Opera No support No	Safari No support No	WebView Android Full support 43	Chrome Android Full support 43	Firefox Android Full support 23	Opera Android No support No	Safari iOS ?	Samsung Internet Android Full support 4.0
`animationName` Experimental	Chrome Full support 43	Edge Full support 12	Firefox Full support 6	IE Full support 10	Opera Full support 30	Safari Full support 9	WebView Android Full support 43	Chrome Android Full support 43	Firefox Android Full support 6	Opera Android Full support 30	Safari iOS Full support 9	Samsung Internet Android Full support 4.0
`elapsedTime` Experimental	Chrome Full support 43	Edge Full support 12	Firefox Full support 6	IE Full support 10	Opera Full support 30	Safari Full support 9	WebView Android Full support 43	Chrome Android Full support 43	Firefox Android Full support 6	Opera Android Full support 30	Safari iOS Full support 9	Samsung Internet Android Full support 4.0
`initAnimationEvent` ExperimentalDeprecatedNon-standard	Chrome No support 1 — 18 Alternate Name No support 1 — 18 Alternate Name Alternate Name Uses the non-standard name: `initWebKitAnimationEvent`	Edge No support 12 — 16	Firefox No support 6 — 23	IE Full support 10	Opera No support 12.1 — 15	Safari No support 4 — 6 Alternate Name No support 4 — 6 Alternate Name Alternate Name Uses the non-standard name: `initWebKitAnimationEvent`	WebView Android No support No	Chrome Android No support No	Firefox Android No support 6 — 23	Opera Android No support 12.1 — 14	Safari iOS No support 3.2 — 6 Alternate Name No support 3.2 — 6 Alternate Name Alternate Name Uses the non-standard name: `initWebKitAnimationEvent`	Samsung Internet Android No support No
`pseudoElement` Experimental	Chrome Full support 68	Edge Full support 79	Firefox Full support 23	IE No support No	Opera No support No	Safari No support No	WebView Android Full support 68	Chrome Android Full support 68	Firefox Android Full support 23	Opera Android No support No	Safari iOS No support No	Samsung Internet Android Full support 10.0

Legend

Full support: Full support
No support: No support
Compatibility unknown: Compatibility unknown
Experimental. Expect behavior to change in the future.: Experimental. Expect behavior to change in the future.
Non-standard. Expect poor cross-browser support.: Non-standard. Expect poor cross-browser support.
Deprecated. Not for use in new websites.: Deprecated. Not for use in new websites.
Uses a non-standard name.: Uses a non-standard name.
Requires a vendor prefix or different name for use.: Requires a vendor prefix or different name for use.