Managing CSS Animations using the Page Visibility API

Toggling between this tab and another will pause the CSS animation. Let this animation run long enough and your fans may start to spin. That's bad! It can eat up battery power and slow the system down.

It's easy to pause animations, however using the Page Visibility API. The trick is to toggle a CSS class based on the value of document.visibilityState or, as we've done here, document.hidden. Open your developer console to see the events get fired.