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 |