animation - CSS 动画是否在严格的时间基础上工作？

Question

也就是说，如果我将动画设置为 1 秒，它是否总是恰好需要 1 秒（即跳过帧以达到该间隔）？

我的问题的第 2 部分涉及如何在异步 Javascript 调用中使用 CSS 动画。动画完成后，我需要能够回忆起它。

Answer 1

时间不保证完全正确。为了演示，我设置了一个测试用例，显示时间与 1 秒标记略有不同。至于问题的第二部分，您可以使用animationend事件重新启动它，也可以将其设置为迭代（就像我在示例中所做的那样）。

更新很难模拟浏览器阻塞，但我注意到当它自然阻塞时与动画有很大的偏差。例如，在加载页面时，我的 Firebug 启动，这导致第一个动画跳到0.574秒，几乎是我原始值的一半。所以看起来浏览器确实试图补偿一点，但它也可能过度补偿。我也见过长达 2 秒的时间，所以我认为你不能说时间会以任何方式准确。

更新 2因此，我能够让浏览器窒息（在 FF 中必须数到 1000000 ......我印象深刻），并且对您的问题的快速回答是否定的，它不会做任何补偿尝试并获得时间准确。它只是窒息并且没有动画。请注意，这是一个紧密的循环，因此如果它可以在那里进行其他计算，它可能会表现得更好，但我不确定这一点。

Answer 2

您的问题的答案基本上都在 MDN 上。它的要点是：

1. 时间并不完全准确，但它们很接近。
2. 在动画（和过渡）期间，有些事件会在不同时间触发。您可以将事件处理程序附加到它们。