测量CSS3完成动画的时间

Question

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

Answer 1

编辑

\n\n

简单来说

\n\n

你必须使用时间戳 AFAIK。

\n\n

根据您想要观察的内容，您可以查看 Javascript 触发 CSS 动画所需的实时时间，也可以查看 CSS 动画的实际运行时间。

\n\n

详细信息

\n\n

正如我们所看到的，elapsedTime不足以获取实际经过的时间。

\n\n

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

\n\n

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

\n\n

这是我对此小提琴的测试结果：

\n\n

\n\n

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

\n\n

我们可以看到，javascript花了\xc2\xb1 4.3秒重新计算样式，然后触发animationStart事件。前者重新计算和布局正好需要 2874ms。因此，与时间线相符，不再需要它了。

\n\n

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

\n\n\n\n

旧答案

\n\n

有趣的问题！

\n\n

您可以使用 CSS3 结束动画事件的侦听器，称为animationend(vendor-prefixes apply) ：

\n\n

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

\n\n

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

\n\n

\n

AnimationEvent.elapsedTime（只读）

\n\n

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

\n\n

对于animationstart事件，elapsedTime除非0.0存在负值，在这种情况下，将使用包含 的 animation-delay\n 来触发该事件 。elapsedTime(-1 * delay)

\n

\n\n

参考 ：

\n\n

\n
• MDN 上的动画事件，
\n
• 我偶然发现的这篇文章，
\n
• 这里有一个例子。
\n
• 当前供应商前缀: \n\n
  \n
  • animationend
  \n
  • webkitAnimationEnd
  \n
  • MSAnimationEnd
  \n
  • oAnimationEnd
  \n
\n

\n