# Restarting a CSS Animation **URL:** \ **Category:** programming\ **Created:** [February 5, 2022, 11:05pm UTC](https://forum.kirupa.com/t/restarting-a-css-animation/650724 "2022-02-05T23:05:43Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [February 5, 2022, 11:05pm UTC](https://forum.kirupa.com/t/restarting-a-css-animation/650724/1 "2022-02-05T23:05:43Z")
Learn how to restart a CSS animation in a way that works across all modern mobile and desktop browsers! * * * This is a companion discussion topic for the original entry at [https://www.kirupa.com/animations/restarting\_css\_animations.htm](https://www.kirupa.com/animations/restarting_css_animations.htm) ---
**Author:** ![mistafisha](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/mistafisha/32/17164_2.png) [@mistafisha](https://forum.kirupa.com/u/mistafisha)\ **Post date:** [March 24, 2022, 2:16pm UTC](https://forum.kirupa.com/t/restarting-a-css-animation/650724/2 "2022-03-24T14:16:27Z")
I’m viewing this in Firefox and the example doesn’t work. Clicking restart does nothing. ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [March 24, 2022, 2:16pm UTC](https://forum.kirupa.com/t/restarting-a-css-animation/650724/3 "2022-03-24T14:16:28Z")
---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [March 24, 2022, 2:22pm UTC](https://forum.kirupa.com/t/restarting-a-css-animation/650724/4 "2022-03-24T14:22:24Z")
What version of Firefox on what OS? ---
**Author:** ![mistafisha](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/mistafisha/32/17164_2.png) [@mistafisha](https://forum.kirupa.com/u/mistafisha)\ **Post date:** [March 24, 2022, 2:55pm UTC](https://forum.kirupa.com/t/restarting-a-css-animation/650724/5 "2022-03-24T14:55:29Z")
My FF is up to date at version 98.0.1 (64-bit) and it’s running on Windows 10 ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [March 25, 2022, 1:11am UTC](https://forum.kirupa.com/t/restarting-a-css-animation/650724/6 "2022-03-25T01:11:20Z")
It works for me on macOS, so there must be some rendering quirks between platforms that is causing this. Let me spin up a Windows VM shortly and see what is going on and/or whether an alternate solution needs to be explored here. Sorry about that. I usually only double and triple check with Safari, for that is the browser that happens to have the most quirks. Chrome and Firefox always just work! 🚆 ---
**Author:** ![mistafisha](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/mistafisha/32/17164_2.png) [@mistafisha](https://forum.kirupa.com/u/mistafisha)\ **Post date:** [March 25, 2022, 5:32pm UTC](https://forum.kirupa.com/t/restarting-a-css-animation/650724/7 "2022-03-25T17:32:01Z")
Any luck? ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [March 25, 2022, 11:03pm UTC](https://forum.kirupa.com/t/restarting-a-css-animation/650724/8 "2022-03-25T23:03:11Z")
Yes, actually! I think. Can you try this: ```auto Restart Animation
``` This adds a `setTimeout` to the `requestAnimationFrame` call. A live version of it is here: [Restart Animation](https://www.kirupa.com/examples/restart_animation.htm) Let me know if this works @mistafisha! I’ll update the code and add a note to the video about this. Cheers, Kirupa ---
**Author:** ![mistafisha](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/mistafisha/32/17164_2.png) [@mistafisha](https://forum.kirupa.com/u/mistafisha)\ **Post date:** [March 31, 2022, 3:16pm UTC](https://forum.kirupa.com/t/restarting-a-css-animation/650724/9 "2022-03-31T15:16:28Z")
Yes, that worked. It seems very strange though since the timeout is for 0 seconds! Can you explain why this work? ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [March 31, 2022, 9:10pm UTC](https://forum.kirupa.com/t/restarting-a-css-animation/650724/10 "2022-03-31T21:10:04Z")
I don’t know 😛 These are parts of the large undocumented behaviors all browsers have in terms of when they validate and invalidate styles. My guess is that a `setTimeout` triggers some code path that forces an invalidation in Firefox whereas a regular `requestAnimationFrame` by itself doesn’t. I’m hoping this continues to work. I’ll try to carve up some time and file a bug in Firefox’s database giving their developers a heads-up that this behavior now works but didn’t work when `setTimeout` is removed. ---
**Author:** ![mistafisha](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/mistafisha/32/17164_2.png) [@mistafisha](https://forum.kirupa.com/u/mistafisha)\ **Post date:** [April 1, 2022, 12:07pm UTC](https://forum.kirupa.com/t/restarting-a-css-animation/650724/11 "2022-04-01T12:07:26Z")
LOL. Well I’m glad I could contribute my bug so you could incorporate it into your instructions! And maybe even get Firefox themselves to address it!