{{SeeCompatTable}}{{APIRef("Web Animations API")}}
Summary
The AnimationEvent
interface represents events providing information related to animations.
Properties
Also inherits properties from its parent {{domxref("Event")}}.
- {{domxref("AnimationEvent.animationName")}} {{readonlyInline}}
- Is a {{domxref("DOMString")}} containing the value of the {{cssxref("animation-name")}} CSS property associated with the transition.
- {{domxref("AnimationEvent.elapsedTime")}} {{readonlyInline}}
- 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
is0.0
unless there was a negative value for {{cssxref("animation-delay")}}, in which case the event will be fired withelapsedTime
containing(-1 *
delay)
. - {{domxref("AnimationEvent.pseudoElement")}} {{readonlyInline}}
- Is a {{domxref("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:''
.
Constructor
- {{domxref("AnimationEvent.AnimationEvent", "AnimationEvent()")}}
- Creates an
AnimationEvent
event with the given parameters.
Methods
Also inherits methods from its parent {{domxref("Event")}}.
- {{domxref("AnimationEvent.initAnimationEvent()")}} {{non-standard_inline}}{{deprecated_inline}}
- Initializes a
AnimationEvent
created using the deprecated {{domxref("Document.createEvent()", "Document.createEvent(\"AnimationEvent\")")}} method.
Specifications
Specification | Status | Comment |
---|---|---|
{{ SpecName('CSS3 Animations', '#AnimationEvent-interface', 'AnimationEvent') }} | {{ Spec2('CSS3 Animations') }} | Initial definition. |
Browser compatibility
{{ CompatibilityTable() }}
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support |
1.0 {{ property_prefix("webkit") }} {{CompatChrome(43.0)}} |
{{ CompatGeckoDesktop("6.0") }} | 10.0 | 12 {{ property_prefix("o") }} 12.10 (without prefix) 15.0 {{ property_prefix("webkit") }} |
4.0 {{ property_prefix("webkit") }} |
AnimationEvent() constructor |
{{CompatChrome(43.0)}} |
{{ CompatGeckoDesktop("23.0") }} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
initAnimationEvent() {{non-standard_inline}}{{deprecated_inline}} |
1.0 | {{ CompatGeckoDesktop("6.0") }} Removed in {{ CompatGeckoDesktop("23.0") }} |
10.0 | 12 | 4.0 |
pseudoelement |
{{CompatNo}} | {{ CompatGeckoDesktop("23.0") }} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|
Basic support | {{CompatVersionUnknown}}{{ property_prefix("webkit") }} | {{ CompatGeckoMobile("6.0") }} | 10.0 | 12 {{ property_prefix("o") }} 12.10 (without prefix) 15.0 {{ property_prefix("webkit") }} |
{{CompatVersionUnknown}}{{ property_prefix("webkit") }} | {{CompatChrome(43.0)}} |
AnimationEvent() constructor |
{{CompatNo}} | {{ CompatGeckoMobile("23.0") }} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatChrome(43.0)}} |
initAnimationEvent() {{non-standard_inline}}{{deprecated_inline}} |
{{CompatVersionUnknown}} | {{ CompatGeckoMobile("6.0") }} Removed in {{ CompatGeckoMobile("23.0") }} |
10.0 | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatNo}} |
pseudoelement |
{{CompatNo}} | {{ CompatGeckoMobile("23.0") }} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
See also
- Using CSS animations
- {{ CSS_Reference:animation() }}