AnimationEvent - Web API 接口参考 编辑

这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

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/wiki/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="/wiki/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 DOMString containing the value of the animation-name CSS property associated with the transition.

AnimationEvent.elapsedTime 只读

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 只读

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 AnimationEvent event with the given parameters.

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 AnimationEvent	Working Draft	Initial definition.

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

• Desktop
• Mobile

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)	未实现	未实现	未实现

See also

• Using CSS animations
• animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-play-state, animation-timing-function, @keyframes.