How can I prevent gifs from animating in brower tabs that are not active?

[SarahLange]

I designed a very nice Christmas theme for my site which involves an animated gif snow animation.

My problem is the animated gif does consume CPU resources and when users open many browser tabs in my sub, the CPU consumption becomes an issue.

I'm forced to only use CSS because the site is hosted on Reddit.

I'm aware that CSS supports the animation-play-state: paused; which seems ideal, however I'm not sure how to switch the state to running only for the page that is visible?

Does anyone know of a crazy way to solve this issue using CSS?

https://www.w3schools.com/cssref/css3_pr_animation-play-state.asp

[Ingolme]

animation-play-state doesn't refer to GIF files, it refers to CSS 3 animated properties. There is no way to stop an animated GIF from playing.

If you want full control over animated images, you'll need a spritesheet and a Javascript code that animates the images. You can use <canvas> or set the background image of a fixed size box. With Javascript you can detect whether the window has been focused or blurred using the "focus" and "blur" event listeners on the window.