测量 CSS3 完成动画的时间

Question

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

Answer 1

编辑

简述

您必须使用时间戳 AFAIK。

根据您要观察的内容，您可以查看 Javascript 触发 CSS 动画所花费的实时时间，或者查看 CSS 动画的实际经过时间。

详细介绍

正如我们所见，elapsedTime 不足以获取实时流逝的时间。

使用时间戳（Date.now() 和 event.timeStamp），我确定了动画经过的实际时间以及动画触发和 animationEnd 事件之间经过的时间：

• 在 Javascript 中添加动画类时保存当前时间戳，
• 将时间戳保存在animationStart中，
• 将时间戳保存在animationEnd，
• 比较那些时间戳。

这是我对this fiddle 的测试结果：

console.log('Time elapsed between animation trigger and AnimationEnd : ' + (animationEndTimestamp - animationTriggeredTimestamp) + 'ms');
console.log('Time Animation took really ' + (animationEndTimestamp - animationStartTimestamp) + 'ms');

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

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

---

旧答案

有趣的问题！

您可以为 CSS3 的结束动画事件使用侦听器，称为 animationend（适用供应商前缀）：

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

然后使用AnimationEvent 的属性之一，elapsedTime：

AnimationEvent.elapsedTime（只读）

是一个浮点数 触发此事件时动画运行的时间（以秒为单位），不包括动画暂停的任何时间。

对于animationstart 事件，elapsedTime 是 0.0，除非有负数 animation-delay 的值，在这种情况下，事件将被触发 elapsedTime 包含(-1 * delay)。

参考资料：

• AnimationEvent on MDN,
• The article I stumbled upon,
• 和here for an example。
• 当前供应商前缀：
  • animationend
  • webkitAnimationEnd
  • MSAnimationEnd
  • oAnimationEnd