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

nom7f22z  于 2023-02-26  发布在  其他
关注(0)|答案(3)|浏览(323)

我有一个奇怪的问题,如果我在我的3个显示器中的一个上播放动画,YouTube视频在任何其他显示器上都会崩溃。我通过禁用chrome://flags中的硬件加速来修复这个问题,但是最近Chrome的一个新更新又让这个问题出现了,我还没有找到修复它的方法。动画出现在Facebook(“有人在输入评论...”)或基本上任何带有animation-duration CSS属性的网站上(我猜旋转器可能是最常用的动画形式)。
我可以通过将此CSS放置在任何页面上来验证这一点:

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

我的所有视频都能完美播放。没有任何问题。我可以把这个添加到一个用户脚本中(或者做一个小扩展),我不认为它会搞砸太多,但我更感兴趣的是,是否有一个Chrome标记可以完全禁用动画?我不知道animation-duration是否适用于任何动画。

6ovsh4lw

6ovsh4lw1#

* {
   animation: none !important;

}

/* 关闭所有元素上的动画 */

qacovj5a

qacovj5a2#

据我所知,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");

请确保在扩展栏中启用该功能
(Note:它对iframe元素不起作用。)
顺便说一句,你可以通过添加--wm-window-animations-disabled命令行标志来禁用chrome中的窗口动画。

5uzkadbs

5uzkadbs3#

请允许我回答我自己的问题。将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);

相关问题