是否可以关闭 Chrome 中的所有 CSS 动画？答案

【问题标题】：Is it possible to turn off all CSS animations in Chrome?是否可以关闭 Chrome 中的所有 CSS 动画？
【发布时间】：2022-01-19 06:00:39
【问题描述】：

我有一个奇怪的问题，如果我在 3 台显示器中的一台上播放动画，任何其他显示器上的 YouTube 视频都会崩溃。我确实通过在 chrome://flags 中禁用硬件加速来解决此问题，但最近 Chrome 中的一个新更新使问题再次出现，我还没有找到解决它的方法。动画出现在 Facebook 之类的地方（“有人正在输入评论...”）或基本上任何具有 animation-duration CSS 属性的网站（我猜微调器可能是最常用的动画形式）。

我可以通过将此 CSS 放置在任何页面上来验证这一点：

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

Boom 会立即完美播放我的所有视频。从来没有问题。我可以将它添加到用户脚本（或做一个小扩展），我不认为它会搞砸太多，但我更想知道是否有一个 Chrome 标志可以完全禁用动画？我不知道animation-duration 是否适用于任何动画。

【问题讨论】：

标签： css css-animations chromium hardware-acceleration

【解决方案1】：

据我所知，Chrome 没有这样的选项。
但是，我可以使用Tampermonkey 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");

确保在扩展栏中启用它注意：它不适用于iframe 元素。

顺便说一句，您可以通过添加 --wm-window-animations-disabled 命令行标志来禁用 chrome 中的窗口动画。

【讨论】：

感谢您的回复。好像我们有同样的想法，因为我比你早一分钟发布了我的想法，哈哈。不幸的是，你的不会碰到影子 DOM 元素。 “通配符选择器”* 也确实命中了 :before 和 :after 元素，因为我在提出自己的解决方案之前进行了测试，所以似乎不需要那些选择器
哦，禁用窗口动画没有任何作用。这是严格的 CSS 动画。
根据this question，通用选择器 * 不会影响伪元素。而且由于您想提高性能，我认为禁用 Chrome 的动画也会有所帮助。
啊，所以它与继承有关。说得通。 Chrome 的动画根本不会影响我的电脑。我的装备中有一个相当不错的 Ryzen 3900X 和 RTX 3070，所以我不知道为什么 CSS 动画会导致它崩溃。在各个网站上被问了十几次，但除了“这是 Chrome 的东西”之外没有人知道为什么......耸耸肩
如果你不是真的需要 Chrome，换一个浏览器可能会更好，比如 Firefox。

【解决方案2】：

请允许我回答我自己的问题。将animation-duration 设置为0s !important 似乎有效。不过，我也添加了animation-play-state: paused 以作为衡量标准。

我做了一个用户脚本，发现它没有针对Shadow DOM，所以我必须遍历每个元素，检查它是否是shadow root，然后添加CSS。由于可以动态地将元素添加到页面中，因此我决定每秒执行一次。到目前为止，即使在包含很多元素的页面上，我也看不到性能差异。

安装 TamperMonkey (Chrome) 或 GreaseMonkey (Firefox) 以使用它：

// ==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);

【讨论】：