CSS3 animation "progress" callback

Question

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?

Answer 1

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.

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.

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.