javascript - 测量 CSS3 完成动画的时间

Question

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

Answer 1

编辑

简述

您必须使用时间戳 AFAIK。

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

详情

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

使用时间戳(Date.now() 和 event.timeStamp)，我确定了动画实际耗时以及动画触发和 之间耗时>动画结束事件:

• 在 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 事件。前者正好需要 2874ms 来重新计算和布局。 所以符合时间线，不再需要。

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

---

旧答案

有趣的问题!

您可以为 CSS3 的结束动画事件使用一个监听器，称为 animationend(适用 vendor 前缀):

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

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

AnimationEvent.elapsedTime (Read only)

Is a float giving the amount of time the animation has been running, in seconds, when this event fired, excluding any time the animation was paused.

For an animationstart event, elapsedTime is 0.0 unless there was a negative value for animation-delay, in which case the event will be fired with elapsedTime containing (-1 * delay).

引用资料:

• AnimationEvent on MDN ,
• The article I stumbled upon ,
• 和here for an example .
• 当前的 vendor 前缀:
  • 动画结束
  • webkitAnimationEnd
  • MSAnimationEnd
  • oAnimationEnd