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

Question

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

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

Answer 1

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

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

更新2 所以，我能够get the browser to choke（在FF中不得不数到1000000 ......我印象深刻），对你的问题的快速回答是否定的，它没有做任何补偿，试图让时间准确。它只是窒息而且没有动画。请注意，这是一个紧凑的循环，所以如果它可以在那里进行其他计算，它可能表现更好，但我肯定不知道。

Answer 2

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

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