CSS3 progress animation play

Question

I just wanted to know if there is a way to track the progress of the element animation. All I know is animationstart and animationend , is there any kind of animationprogress ?

Answer 1

No, there is no animationprogess event. There are three types of AnimationEvent events in the W3 specification . There is animationstart , animationend and animationiteration . animationiteration starts instead of animationend when the animation repeats again.

Perhaps you can use setInterval() , which was set for some part of the animation time (for example, 10% of the animation time), and then you will receive calls at each point in the animation. You can request the animation progress in any of these timer events if you need the exact animation position.

Or, if you need better synchronization accuracy, you can split the animation into several consecutive animations and use the animationend for each part as a progress indicator and trigger to start the next phase of the animation.