☰

在 Firefox 上禁用 CSS 动画

tag-icon • tag-icon firefox performance css
在 Firefox 上禁用 CSS 动画

我发现 CSS 动画很慢，而且大多数时候都没什么用。它们会让网站感觉很沉重、很滞后，尤其是当我已经在使用 CPU 执行其他任务时。

因此，我想禁用浏览器上的 CSS 动画以加快速度。最好的办法是使用 noscript 或 adblock 之类的插件，这样我就可以针对特定网站禁用/启用这些动画。

有类似的东西吗？我想要一个简洁的网站 :)。

答案1

我最终根据@DavidPostill 的评论编写了一个 Firefox 扩展。

https://addons.mozilla.org/en-US/firefox/addon/no-transition/

该扩展允许您全局禁用/启用 CSS 转换和动画。

我希望它对其他人有用。网络又感觉快了！<3

答案2

对于 Firefox，您可以创建 userContent.css 文件并向其中添加一些禁用 CSS 动画的代码行。

userContent.css 位于 userChrome.css 所在的名为“chrome”的文件夹中，即： Firefox_Profile_Folder\chrome\userChrome.css 。

我使用 theguardian.com 上每篇文章页面底部的动画进行了测试 - 这是一个在浅灰色背景上移动的垂直白色渐变动画。

在 Firefox 104.0.2 上测试

我下载了 UnshapelyMuskrat 的插件：Disable Transitions 并解压。我复制了 disable-transitions.css 文件中的代码：

* {
    animation-delay: initial !important;
    animation-direction: initial !important;
    animation-duration: initial !important;
    animation-fill-mode: initial !important;
    animation-iteration-count: initial !important;
    animation-name: initial !important;
    animation-play-state: initial !important;
    animation-timing-function: initial !important;
    animation: initial !important;

    -moz-animation-delay: initial !important;
    -moz-animation-delay: initial !important;
    -moz-animation-direction: initial !important;
    -moz-animation-fill-mode: initial !important;
    -moz-animation-iteration-count: initial !important;
    -moz-animation-name: initial !important;
    -moz-animation-play-state: initial !important;
    -moz-animation-timing-function: initial !important;
    -moz-animation: initial !important;

    -webkit-animation-delay: initial !important;
    -webkit-animation-delay: initial !important;
    -webkit-animation-direction: initial !important;
    -webkit-animation-fill-mode: initial !important;
    -webkit-animation-iteration-count: initial !important;
    -webkit-animation-name: initial !important;
    -webkit-animation-play-state: initial !important;
    -webkit-animation-timing-function: initial !important;
    -webkit-animation: initial !important;

    transition-delay: initial !important;
    transition-duration: initial !important;
    transition-property: initial !important;
    transition-timing-function: initial !important;
    transition: initial !important;

    -moz-transition-delay: initial !important;
    -moz-transition-duration: initial !important;
    -moz-transition-property: initial !important;
    -moz-transition-timing-function: initial !important;
    -moz-transition: initial !important;

    -webkit-transition-delay: initial !important;
    -webkit-transition-duration: initial !important;
    -webkit-transition-property: initial !important;
    -webkit-transition-timing-function: initial !important;
    -webkit-transition: initial !important;
}

相关内容