AnimationEvent elapsedTime 属性

示例

动画已经运行了多少秒：

const div = document.getElementById("myDIV");
div.addEventListener("animationiteration", myRepeatFunction);

function myRepeatFunction(event) {
this.innerHTML = "Elapsed time: " + event.elapsedTime;
}

亲自试一试 »

描述

这个elapsedTime属性返回秒数当动画事件发生时，动画已经运行。

这个elapsedTime属性始终返回 "0"动画开始事件。

这个elapsedTime如果动画暂停，该值不受影响。

这个elapsedTime属性是只读的。

动画活动

Event	Occurs When
animationstart	A CSS animation has started
animationend	A CSS animation has completed
animationiteration	A CSS animation is repeated

动画属性

Property	Description
animationName	The name of the animation
elapsedTime	The number of seconds an animation has been running
pseudoElement	The name of the pseudo-element of the animation

也可以看看：

动画事件对象
 Style 动画属性

教程：

CSS3 动画

语法

event.elapsedTime

技术细节

返回值：	一个号码。动画已运行的秒数。
DOM 版本：	DOM 级别 3动画活动

浏览器支持

event.elapsedTime是 DOM Level 3 (2004) 功能。

所有现代浏览器都完全支持它：


Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	11