CSS3动画“进度”打回来 [英] CSS3 animation "progress" callback

问题描述

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

I just wanted to know if there is a way to monitor progress of a element's animation. All I know is animationstart and animationend, Is there some sort of animationprogress?

推荐答案

不，没有 animationprogess 事件。根据 W3规范，存在三种类型的 AnimationEvent 事件。有 animationstart ， animationend 和 animationiteration 。当动画要再次重复播放时，会触发 animationiteration animationend 。

No, there is no animationprogess event. Per the W3 specification, there are three types of AnimationEvent events. There is animationstart, animationend and animationiteration. animationiteration is fired in place of animationend when the animation is about to repeat again.

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

You could presumably use a setInterval() that was set for some fraction of the animation time (e.g. 10% of the animation time) and then you would get called at each point in the animation. You could query the progress of the animation at any of those timer events if you needed a precise position of the animation.

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

Or, if you wanted more precision of timing, you could break your animation up into multiple sequential animations and use animationend on each piece as your progress indicator and the trigger to start the next phase of the animation.

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