SarahLange Posted March 26, 2017 Share Posted March 26, 2017 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 Link to comment Share on other sites More sharing options...
Ingolme Posted March 27, 2017 Share Posted March 27, 2017 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now