javascript - CSS3 animation "progress" callback - Stack Overflow

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?

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?

• javascript
• css
• css-transitions

Share Follow edited Aug 10, 2015 at 2:41 GʀᴜᴍᴘʏCᴀᴛ 9,0482020 gold badges9090 silver badges160160 bronze badges asked Aug 10, 2015 at 2:38 masterpreenzmasterpreenz 2,30011 gold badge1414 silver badges2121 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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.