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.