WEB ANIMATION (https://www.kirupa.com/css_animations/index.htm)
BOOK (https://www.kirupa.com/book/animation_in_html_css_and_javascript.htm)
VIDEO (https://www.youtube.com/channel/UCZCQ3LXtU3IUzMBQBqN69KQ)
Restarting a CSS Animation
by kirupa (https://www.kirupa.com/me/index.htm) | filed under Web Animation (https://www.kirupa.com/html5/learn_animation.htm)
Learn how to restart a CSS animation in a way that works across all modern mobile and desktop browsers!
CSS animations have a lot going for them, but there is one thing that they don't support very easily. That thing has to do with restarting them. Once an animation starts running, there is no built-in way to stop that animation and have it start from the beginning. Once an animation has run to completion and it isn't set to loop, restarting that animation isn't easily provided either. That's all good, though. In this article, we'll look at how a few lines of JavaScript can allow us to restart a CSS animation.
The Code
If you are just looking for the one snippet of code you need to add to make restarting a CSS animation possible, then look below:
element.style.animationName = "none";
requestAnimationFrame(() => {
setTimeout(() => {
element.style.animationName = ""
}, 0);
});
To use this code, replace element with a reference to the DOM element that is being animated. To be more specific, this is the DOM element that has the associated animation or animation-name property set on it in CSS.
Full Example
To see how the above snippet works as part of a real example, take a look at the following (or in a separate window (https://www.kirupa.com/examples/restart_animation.htm)):
Your browser does not support inline frames or is currently configured not to display inline frames.
Click on the Restart button to have our circle animation start from the beginning. You can keep pressing it, even while the animation is running, to have our animation restart. The full HTML, CSS, and JS that makes this example work is provided below:
Restart Animation
For added emphasis, our restart animation code is highlighted. If you want to learn more about this example, this article's associated video (https://www.youtube.com/watch?v=ut5alGmdFNc) is just what you need.
Conclusion
The trick behind what we are doing lies in the fact that a CSS animation does all of its animation-like things only when it has keyframes linked with it. When we break that link by setting the animation-name CSS property to none, we stop our animation in its tracks. By setting animation-name to empty quotes, we tell our browser to fall back to the animation-name value set in the CSS originally. To ensure our keyframes are detached in one frame and re-attached in another frame, we insert an artificial delay. We have a bunch of options here (https://www.kirupa.com/html5/timers_js.htm), but the approach we used relied on our good friend, requestAnimationFrame with a little bit of setTimeout added to deal with cross-browser quirks (https://forum.kirupa.com/t/restarting-a-css-animation/650724/8?u=kirupa). Pretty cool, right?