AnimationEvent elapsedTime 屬性
示例
動畫已執行多少秒
const div = document.getElementById("myDIV");
div.addEventListener("animationiteration", myRepeatFunction);
function myRepeatFunction(event) {
this.innerHTML = "已用時間: " + event.elapsedTime;
}
自己動手試一試 »
描述
elapsedTime 屬性在動畫事件發生時，返回動畫已執行的秒數。
對於 animationstart 事件，elapsedTime 屬性總是返回 "0"。
如果動畫暫停，elapsedTime 的值不受影響。
elapsedTime 屬性是隻讀的。
動畫事件
| 事件 | 發生時間 |
|---|---|
| animationstart | CSS 動畫已開始 |
| animationend | CSS 動畫已完成 |
| animationiteration | CSS 動畫重複播放 |
動畫屬性
| 屬性 | 描述 |
|---|---|
| animationName | 動畫的名稱 |
| elapsedTime | 動畫已執行的秒數 |
| pseudoElement | 動畫的偽元素的名稱 |
另請參閱
教程
語法
事件.elapsedTime
技術詳情
| 返回值 | 一個數字。 動畫已執行的秒數。 |
|---|---|
| DOM 版本 | DOM Level 3 動畫事件 |
瀏覽器支援
event.elapsedTime 是 DOM Level 3 (2004) 特性。
所有現代瀏覽器都完全支援它
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 11 |
