這是一個實驗中的功能
此功能在某些瀏覽器尚在開發中，請參考兼容表格以得到不同瀏覽器用的前輟。
摘要
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.animationNameRead only- 是一個
DOMString包含的值animation-nameCSS屬性與過渡有關。 AnimationEvent.elapsedTimeRead only- 是一個
float給予時間的動畫已經運行，以秒為單位，當該事件燒製，不含動畫被暫停的任何時間量。為一個"animationstart"事件，elapsedTime是0.0，除非有一個負值animation-delay，在這種情況下，該事件將與燒製elapsedTime含有(-1 *delay)。 AnimationEvent.pseudoElementRead 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!
| 特點 | 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.