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

Question

我遇到一个奇怪的问题，如果我在 3 个显示器中的一个上播放动画，则任何其他显示器上的 YouTube 视频都会崩溃。我确实通过在 chrome://flags 中禁用硬件加速来修复此问题，但 Chrome 中的一个新更新最近使该问题再次出现，而且我还没有找到修复它的方法。动画发生在 Facebook 等地方(“有人正在输入评论...”)或基本上任何带有 animation-duration CSS 属性的网站(我猜旋转可能是最常用的动画形式) )。

我只需将此 CSS 放置在任何页面上即可验证这一点:

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

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

Answer 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 中的窗口动画。