这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
Summary
AnimationEvent 接口表示提供与动画相关的信息的事件。
<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="https://developer.mozilla.org/zh-CN/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="https://developer.mozilla.org/zh-CN/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;}
Properties
属性继承其父级Event.
AnimationEvent.animationName只读- Is a
DOMStringcontaining the value of theanimation-nameCSS property associated with the transition. AnimationEvent.elapsedTime只读- Is 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). AnimationEvent.pseudoElement只读- 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:''.
Constructor
AnimationEvent()- Creates an
AnimationEventevent with the given parameters.
Methods
Also inherits methods from its parent Event.
AnimationEvent.initAnimationEvent()- Initializes a
AnimationEventcreated using the deprecatedDocument.createEvent("AnimationEvent")method.
Specifications
| Specification | Status | Comment |
|---|---|---|
| CSS Animations AnimationEvent |
Working Draft | Initial definition. |
Browser compatibility
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 1.0 webkit | 6.0 (6.0) | 10.0 | 12 o 12.10 (without prefix) 15.0 webkit |
4.0 webkit |
AnimationEvent() constructor |
未实现 | 23.0 (23.0) | 未实现 | 未实现 | 未实现 |
initAnimationEvent() |
1.0 | 6.0 (6.0) Removed in 23.0 (23.0) |
10.0 | 12 | 4.0 |
pseudoelement |
未实现 | 23.0 (23.0) | 未实现 | 未实现 | 未实现 |
| Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | (Yes)webkit | 6.0 (6.0) | 10.0 | 12 o 12.10 (without prefix) 15.0 webkit |
(Yes)webkit |
AnimationEvent() constructor |
未实现 | 23.0 (23.0) | 未实现 | 未实现 | 未实现 |
initAnimationEvent() |
(Yes) | 6.0 (6.0) Removed in 23.0 (23.0) |
10.0 | (Yes) | (Yes) |
pseudoelement |
未实现 | 23.0 (23.0) | 未实现 | 未实现 | 未实现 |