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

Question

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.

anass Sanba · Answer 1 · 2022-10-05T11:07:06.520

2

* {
   animation: none !important;

}

/* turn off animation on all elements*/

edited Oct 05 '22 at 11:07

answered Oct 05 '22 at 11:06

anass Sanba

19
1
4

Ba2sik · Answer 2 · 2023-02-23T15:42:59.660

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.

edited Feb 23 '23 at 15:42

answered Jan 18 '22 at 22:00

Ba2sik

283
4
18

Thanks for the reply. Seems like we have the same idea, as I posted mine one minute before yours haha. Yours won't hit shadow DOM elements, unfortunately. The "wildcard selector" `*` does hit the :before and :after elements as well, as I tested before coming up with my own solution, so no need for those selectors it seems like – MortenMoulder Jan 18 '22 at 22:10
Oh and disabling window animations doesn't do anything. It's strictly CSS animations. – MortenMoulder Jan 18 '22 at 22:10
according to [this question](https://stackoverflow.com/questions/24794545/universal-selector-and-pseudo-elements), the universal selector * does not affect pseudo-elements. And since you want to improve your performance, I think that disabling also Chrome's animation would also help. – Ba2sik Jan 18 '22 at 22:20
Ah, so it has to do with inheritance. Makes sense. Chrome's animations aren't affecting my PC at all. I have a quite respectable Ryzen 3900X and RTX 3070 in my rig, so I have no clue why CSS animations can cause it to crash. Asked a dozen times on various sites, but nobody knows why except "It's a Chrome thing".. shrug – MortenMoulder Jan 18 '22 at 22:30
If you do not really need Chrome, it may be better for you to switch to another browser, such as Firefox. – Ba2sik Jan 18 '22 at 23:32
I like my Chrome. Sorry. – MortenMoulder Jan 18 '22 at 23:47

score 0 · Accepted Answer · answered Jan 18 '22 at 21:59

Allow me to answer my own question. Setting animation-duration to 0s !important seems to be working. However, I added animation-play-state: paused for good measure as well.

I made an userscript, and found that it doesn't target the Shadow DOM, so I have to traverse through every element, check if it's a shadow root, and then add the CSS. Since elements can be added to a page dynamically, I decided to do this every second. So far I cannot see a performance difference, even on pages with a lot of elements.

Install TamperMonkey (Chrome) or GreaseMonkey (Firefox) to use this:

// ==UserScript==
// @name         Disable all animations
// @version      1.0
// @author       mortenmoulder
// @include      *
// @grant        GM_addStyle
// @grant        GM_addElement
// ==/UserScript==

//remove animations globally
GM_addStyle("* { animation-duration: 0s !important; animation-play-state: paused; }");

var ignoreElements = [];

//remove animations inside shadow DOM elements
function findShadowRoots(elements) {
    for (var i = 0; i < elements.length; i++) {
        if(elements[i].shadowRoot) {

            if(ignoreElements.includes(elements[i].shadowRoot) == false) {
                GM_addElement(elements[i].shadowRoot, 'style', { textContent: '* { animation-duration: 0s !important; animation-play-state: paused;' });
                ignoreElements.push(elements[i].shadowRoot);
            }

            findShadowRoots(elements[i].shadowRoot.querySelectorAll("*"));
        }
    }
}

//remove animations every 1 second
setInterval(() => {
    var allNodes = document.querySelectorAll('*');
    findShadowRoots(allNodes);
}, 1000);

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

3 Answers3