测量CSS3完成动画的时间

Question

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

Answer 1

修改

简而言之

您必须使用时间戳AFAIK。

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

详情

正如我们所见，elapsedTime不足以让实时过去。

使用时间戳（Date.now()和event.timeStamp），我确定了动画的实时时间＆amp;动画触发和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＆amp; amp; 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