Javascript 测量CSS3完成动画的时间

我试图将CSS3动画与Javascript动画进行比较，并试图测量完成CSS3动画所需的时间。使用Chrome的Timeline工具，实际时间总是比我在CSS3中指定的时间长。是否有一种方法可以自动获取经过的时间，而不是手动使用时间线工具？

Edit 简言之 您必须使用AFAIK的时间戳。

根据您试图观察的内容，您可以看到Javascript触发CSS动画所需的实时时间，也可以看到CSS动画所经过的实时时间

详细地 正如我们所看到的，

elapsedTime

不足以获得经过的实时时间

使用时间戳（

Date.now（）

和

event.timeStamp

），我确定了动画的实际运行时间&动画触发和

animationEnd

事件之间的运行时间：

• 在Javascript中添加动画类时保存当前时间戳
• 将时间戳保存在

  animationStart

  中
• 将时间戳保存在

  animationEnd

  中
• 比较这些时间戳

以下是我的测试结果：

我们可以看到javascript需要±4.3秒来重新计算样式，然后触发animationStart事件。前者需要2874ms来重新计算和布局这样就可以匹配时间线，不再需要它了

注意：我用10、100、1000、10000和20000 div运行了这个测试

---

旧答案 有趣的问题

您可以使用CSS3结束动画事件的侦听器，名为

animationend

（供应商前缀适用）：

然后使用

AnimationEvent

的属性之一，

elapsedTime

：

AnimationEvent.elapsedTime（只读） 浮点数是指 触发此事件时动画已运行的时间（秒），不包括动画暂停的任何时间

对于

animationstart

事件，

elapsedTime

为

0.0

，除非出现负值

动画延迟的值，在这种情况下，事件将以
elapsedTime
包含
（-1*延迟）

参考资料：


,
,
和
当前供应商前缀：

animationend
webkitAnimationEnd
MSAnimationEnd
oAnimationEnd

好问题。不知道任何方法。在javascript中，通过记录到控制台所经过的时间非常容易，但是对于CSS3，我所知道的没有输出。您是否尝试过使用计时器和
animationEnd
事件？谢谢您的回答。我尝试过这个，但它总是为动画属性生成时间。我尝试用
动画：mykeyframes 2s
设置10000个div的动画。动画大约花了10秒，但AnimationEvent.elapsedTime说正好是2秒：/@Linksku这太容易了……你能给我一把你的测试小提琴吗？我也想做一些实验！干得好！延迟是为了您可以使用Chrome的时间线工具手动测量它。@Linksku做了我的测试，请参阅我编辑的答案：时间戳是唯一确定的方法。
console.log('Time elapsed between animation trigger and AnimationEnd : ' + (animationEndTimestamp - animationTriggeredTimestamp) + 'ms');
console.log('Time Animation took really ' + (animationEndTimestamp - animationStartTimestamp) + 'ms');

yourElement.addEventListener("animationend", animationListener, false);