CSS3动画"进度"回调

Question

我只是想知道是否有办法监控元素动画的进度.我所知道的animationstart和animationend,是否有某种animationprogress？

Answer 1

不，没有animationprogess事件。根据W3 规范，事件分为三种类型AnimationEvent。有animationstart,animationend和animationiteration. 在动画即将再次重复时animationiteration触发。animationend

您大概可以使用setInterval()为动画时间的一部分（例如动画时间的 10%）设置的 a ，然后您将在动画中的每个点被调用。如果您需要动画的精确位置，您可以在任何这些计时器事件中查询动画的进度。

或者，如果您想要更精确的计时，您可以将动画分解为多个连续动画，并将animationend每个片段用作进度指示器和开始动画下一阶段的触发器。