← 全部文章

教程

关闭动画、视差和自动播放 —— 一个更安静的页面

15 5月 2026 · 作者 JustZix Team

每次滚动都跳动的视差。自己动的轮播。自动播放的视频。对一些人这只是个讨厌的东西，对另一些人是个真实的问题（前庭失调、疲劳）。一条规则在一个页面上平息运动。

运动的三个来源

• CSS 动画和过渡 —— animation、transition。
• 平滑滚动和视差 —— scroll-behavior 加在 JS 里计算的效果。
• 自动播放的视频 —— <video autoplay>。

CSS 规则 —— 动画和滚动

*, *::before, *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}
html { scroll-behavior: auto !important; }

我们故意用 0.01ms 而不是 0s：动画仍然「发生」，所以监听 animationend 事件的页面代码照样收到它，不会卡在等待里。在眼里，运动消失了。

JS 规则 —— 停止视频自动播放

function stopVideos() {
  document.querySelectorAll('video').forEach(v => {
    v.removeAttribute('autoplay');
    if (!v.paused) v.pause();
  });
}
stopVideos();
new MutationObserver(stopVideos)
  .observe(document.body, { childList: true, subtree: true });

更好的做法：尊重系统的「减少动态效果」

你的操作系统有一个「减少动画」设置。页面本应通过 prefers-reduced-motion 读取它 —— 但许多页面不读。如果你在系统里开了那个选项，这条规则只是把页面没能尊重的东西强制执行。

坑

• 部分动画承载意义。一个被缩到 0.01ms 的加载转圈从视野里消失 —— 通常无害，但记在心里。
• 在 JS 里计算的视差。那些用脚本在滚动时移动背景的效果在 CSS 规则下幸存。那时只有隐藏背景层才有用。
• SPA 导航后自动播放回来。所以 MutationObserver 在站岗。

另见

• 示例 —— 关闭动画的代码片段
• 驯服粘性元素 —— 另一条为了更安静页面的规则
• 深色模式 —— 视觉舒适

安装 JustZix —— 浏览时别让页面跳舞。