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"。

注释：该属性只读。

浏览器支持

表中的数字注明了完全支持该属性的首个浏览器版本。

属性 Chrome IE Firefox Safari Opera
elapsedTime 支持 10.0 6.0 支持 支持

语法

event.elapsedTime

技术细节

返回值： 数字值，表示动画运行的秒数。

相关页面

HTML DOM 参考手册：animationstart 事件

HTML DOM 参考手册：animationiteration 事件

HTML DOM 参考手册：animationend 事件

HTML DOM 参考手册：AnimationEvent animationName 属性

CSS 参考手册：CSS3 animation 属性

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

DOM 事件 AnimationEvent