CSS3动画"进度"回调

CSS3 animation "progress" callback

本文关键字：quot 回调进度动画 CSS3 更新时间：2023-09-26

我只是想知道是否有一种方法来监控元素的动画进度。我只知道animationstart和animationend，还有animationprogress吗?

否，无animationprogess事件。根据W3规范，有三种类型的AnimationEvent事件。有animationstart, animationend和animationiteration。当动画即将再次重复时，animationiteration将代替animationend被触发。

你可能会使用一个setInterval()，它被设置为动画时间的一部分(例如动画时间的10%)，然后你会在动画的每个点被调用。如果需要动画的精确位置，可以在这些计时器事件中查询动画的进度。

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