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

Question

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

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

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

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

Answer 1

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

我做了一个用户脚本，发现它没有针对影子DOM，所以我必须遍历每个元素，检查它是否是影子根，然后添加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);

Answer 2

据我所知Chrome没有这样的选项。
但是，我能够使用 Tampermonkey extension.

做出类似的东西

只需将以下脚本添加到扩展中：

// ==UserScript==
// @name           Animation Stopper
// @description    Stop all CSS animations on every website.
// @author         Ba2siK - https://whosebug.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 中的 window 动画。

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

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

css

css-animations

chromium

hardware-acceleration