CSS3动画&进展&回调 [英] CSS3 animation "progress" callback

问题描述

我只是想知道是否有一种方法可以监视元素动画的进度。我只知道animationstart和animationend，有什么animationprogress吗？

推荐答案

否，没有animationprogess事件。根据W3 specification，有三种类型的AnimationEvent事件。有animationstart、animationend和animationiteration。当动画即将再次重复时，将激发animationiteration而不是animationend。

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

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

这篇关于CSS3动画&进展&回调的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！