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

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

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

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

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

stack overflow Is it possible to turn off all CSS animations in Chrome?
原文答案
author avatar

接受的答案

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

我做了一个用户脚本,发现它不针对Shadow 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);

答案:

作者头像

据我所知,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 中的窗口动画。

作者头像
* {
   animation: none !important;

}

/ 关闭所有元素的动画/