我发现 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;
}