AnimationEvent elapsedTime 属性
示例
动画运行了多少秒
const div = document.getElementById("myDIV");
div.addEventListener("animationiteration", myRepeatFunction);
function myRepeatFunction(event) {
this.innerHTML = "Elapsed time: " + event.elapsedTime;
}
自己试试 »
描述
当动画事件发生时，elapsedTime 属性返回动画运行的秒数。
对于 animationstart 事件，elapsedTime 属性始终返回“0”。
如果动画暂停，elapsedTime 的值不会受到影响。
elapsedTime 属性是只读的。
动画事件
| 事件 | 发生时 |
|---|---|
| animationstart | CSS 动画已启动 |
| animationend | CSS 动画已完成 |
| animationiteration | CSS 动画重复 |
动画属性
| 属性 | 描述 |
|---|---|
| animationName | 动画的名称 |
| elapsedTime | 动画运行的秒数 |
| pseudoElement | 动画的伪元素的名称 |
另请参阅
教程
语法
event.elapsedTime
技术细节
| 返回值 | 一个数字。 动画运行的秒数。 |
|---|---|
| DOM 版本 | DOM Level 3 动画事件 |
浏览器支持
event.elapsedTime 是 DOM Level 3 (2004) 的功能。
它在所有现代浏览器中得到完全支持
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 11 |
