Is it possible to turn off all CSS animations in Chrome?

I have a weird issue where if I play an animation on one of my 3 monitors, YouTube videos on any other monitor crashes. I did fix this by disabling hardware acceleration in chrome://flags, but a new update in Chrome recently made the issue come back, and I haven't found a way to fix it yet. Animations occur on places like Facebook ("Someone is typing a comment...") or basically any website with a animation-duration CSS property on something (spinners are probably the most used form of animations I guess).

I can verify this simply by placing this CSS on any page:

* {
  animation-duration: 0s !important;
}

Boom instantly all my videos play perfectly. No issues what so ever. I could add this to an userscript (or make a tiny extension), and I don't think it would mess up too much, but I'm more interested in knowing if there's a Chrome flag that can disable animations completely? I don't know if animation-duration works for any animation.


Solution 1:

From what I know Chrome has no such option.
But, I was able to make something similar using the Tampermonkey extension.

Simply add the following script to the extension:

// ==UserScript==
// @name           Animation Stopper
// @description    Stop all CSS animations on every website.
// @author         Ba2siK - https://stackoverflow.com/users/7845797
// @match          *://*/*
// @grant          GM_addStyle
// @run-at         document-end
// ==/UserScript==

GM_addStyle(`
  *, *:before, *:after {
    transition-property: none !important;
    transform: none !important;
    animation: none !important;
  }`
);

console.log("Animation Stopper ran successfully");

Make sure it's enabled at the extensions bar Note: it won't work on iframe elements.

Btw, You can disable the window animation in chrome by adding the --wm-window-animations-disabled command-line flag.