I have a website that relies heavily with CSS transitions/animations using animate.css library -> https://www.frasesparavida.com.br
I know browser nowadays do a great job optimizing CSS animations using mainly GPU to avoid bottleneck the CPU. So I was wondering: should I stop manually (using JS) my CSS animations when I detect my animations are outside of the viewport or browser will automatically stop processing those animations?
Most of my animations are done adding/removing classes like fadeInUp to elements during some time intervals. So my question is this: does adding those classes (that cause animations) when elements are outside of the viewport cause any significative overhead to the browser? Do browsers “pause” those animations automatically when they are not visible?
From what I’ve seen, I believe the animations keep running even while not visible. So it’s up to you if you want to pause them while not visible, the only reason I can think of for pausing them would be for slower computers and operating systems, but these animations don’t seem too intensive for most to handle. If you were to do this just bare in mind that if you do, it is more JS for the browser to run.