這是一個實驗中的功能
此功能在某些瀏覽器尚在開發中,請參考兼容表格以得到不同瀏覽器用的前輟。
摘要
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!
特點 | 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
.