轻松上手,快乐学习!

AnimationEvent elapsedTime 属性


❮ DOM 事件 ❮ AnimationEvent

实例

确定动画运行了多少秒:

var x = document.getElementById("myDIV");
x.addEventListener("animationiteration", myRepeatFunction);

function myRepeatFunction(event) {
  this.innerHTML = "Elapsed time: " + event.elapsedTime;
}
亲自试一试 »

定义和用法

elapsedTime 属性返回动画已运行的秒数,当一个动画事件发生时。

注释:如果动画暂停(通过使用 CSS 属性 animation-delay),则返回值不受影响。

注释:对于 animationstart 事件,此属性始终返回 "0"。

注释:该属性是只读的。


浏览器支持

表中的数字表示支持该属性的第一个浏览器版本。

属性
elapsedTime Yes 10.0 6.0 Yes Yes

语法

event.elapsedTime

技术细节

返回值: 数字值,表示动画运行的秒数。

相关页面

HTML DOM 参考手册: The animationstart 事件

HTML DOM 参考手册: The animationiteration 事件

HTML DOM 参考手册: The animationend 事件

HTML DOM 参考手册: AnimationEvent animationName 属性

CSS 参考手册: CSS3 animation 属性

CSS 参考手册: CSS3 animation-duration 属性


❮ DOM 事件 ❮ AnimationEvent