AnimationEvent

這是一個實驗中的功能
此功能在某些瀏覽器尚在開發中，請參考兼容表格以得到不同瀏覽器用的前輟。

摘要

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-TW/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-TW/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;}

性能

另外從其父 Event 繼承屬性。

AnimationEvent.animationName Read only: 是一個DOMString包含的值 animation-name CSS屬性與過渡有關。
AnimationEvent.elapsedTime Read only: 是一個float給予時間的動畫已經運行，以秒為單位，當該事件燒製，不含動畫被暫停的任何時間量。為一個"animationstart"事件，elapsedTime是0.0，除非有一個負值animation-delay，在這種情況下，該事件將與燒製elapsedTime含有 (-1 * delay)。
AnimationEvent.pseudoElement Read only: 是一個DOMString，從"::"，包含的名字虛擬元素的動畫運行。如果動畫上不偽元素，但該元素，一個空字符串上運行：''。

構造函數

AnimationEvent(): 創建一個AnimationEvent事件具有給定參數。

方法

同時繼承其父事件方法。

AnimationEvent.initAnimationEvent(): 初始化AnimationEvent 使用過時的創建 Document.createEvent("AnimationEvent") 方法。

規範

產品規格	狀態	註解
CSS Animations The definition of 'AnimationEvent' in that specification.	Working Draft	初始定義。

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

特點	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
基本支持	1.0 webkit	6.0 (6.0)	10.0	12 O 12.10 15.0 webkit	4.0 webkit
`AnimationEvent()`構造函數	No support	23.0 (23.0)	No support	No support	No support
`initAnimationEvent()`	1.0	6.0 (6.0) 在23.0 (23.0)刪除	10.0	12	4
`pseudoelement`	No support	23.0 (23.0)	No support	No support	No support

特點	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile	Chrome for Android
基本支持	(Yes)webkit	6.0 (6.0)	10.0	12 o 12.10 15.0 webkit	(Yes)webkit	43.0
`AnimationEvent()`構造函數	No support	23.0 (23.0)	No support	No support	No support
`initAnimationEvent()`	(Yes)	6.0 (6.0) 在23.0 (23.0)刪除	10.0	(Yes)	(Yes)
`pseudoelement`	No support	23.0 (23.0)	No support	No support	No support

另請參見

使用CSS動畫
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.

摘要

性能

構造函數

方法

規範

瀏覽器兼容性

另請參見