怎么在HTML中通过prefers-reduced-motion检测用户偏好关闭动画-html教程-PHP中文网

直接用@media (prefers-reduced-motion: reduce)检测，需同时重置animation、transition、scroll-behavior，并为JS动画手动监听matchMedia变化。

怎么在html中通过prefers-reduced-motion检测用户偏好关闭动画

直接用 @media (prefers-reduced-motion: reduce) 就能检测，不需要 JS 监听——这是浏览器原生支持的 CSS 媒体查询，开箱即用。

为什么不能只写 `animation: none` 就完事？

很多人加了媒体查询后只禁关键帧动画，结果 hover 下拉菜单卡住、模态框不聚焦、滚动条突然失灵。问题出在：过渡（transition）、平滑滚动（scroll-behavior）、甚至某些 transform 和 opacity 的 inline 变化，都会在 reduced 模式下继续插值，造成布局错乱或焦点丢失。

必须同时重置 transition、animation、scroll-behavior
对依赖动画逻辑的 JS 组件（比如轮播图、抽屉菜单），CSS 层面禁用后，JS 仍可能尝试执行 rAF 动画，需额外降级
别用 animation-duration: 0s，它仍会触发解析和计时器；animation: none 才真正跳过整个动画流程

怎么批量关闭所有 CSS 动画和过渡？

最稳妥的兜底写法是全局重置，再按需放开极简反馈：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  /* 允许颜色类变化，保留最小可用性反馈 */
  [class*="bg-"], [class*="text-"] {
    transition: background-color 0.05s, color 0.05s !important;
  }
}

!important 是必须的——第三方组件或内联样式常带高优先级，不加容易被覆盖
不要用 * { animation-duration: 0.01ms } 这类“伪禁用”，它仍会触发渲染管线，低端机上反而更卡
如果用了自定义滚动条（::-webkit-scrollbar），也要单独加 transition: none，Safari 在 reduced 模式下不会自动静音它

如何让 JS 动画也响应这个偏好？

CSS 媒体查询管不到 JS，所以 requestAnimationFrame、GSAP、或者 element.animate() 都得手动判断：

const motionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
function startAnimation(el) {
  if (motionQuery.matches) {
    el.style.opacity = '1';
    el.style.transform = 'none';
    return;
  }
  el.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 300 });
}