如何用CSS prefers-reduced-motion优化体验？-css教程-PHP中文网

使用 prefers-reduced-motion 媒体查询可以检测用户是否开启了系统级的减少动态效果选项，从而自动关闭或简化 css 动画与过渡。具体做法是在样式表中定义该媒体查询规则，将涉及动画的属性（如 animation、transition）重置为静态状态，例如设置 animation: none 或 transition: none。这样既保留了视觉设计的完整性，又尊重了用户的无障碍偏好。

如何用CSS prefers-reduced-motion优化体验？

`prefers-reduced-motion` 如何匹配用户设置？

该媒体查询通过匹配操作系统的辅助功能设置来生效。当用户在 Windows、macOS 或移动端系统中开启“减少动画”选项后，浏览器会将 prefers-reduced-motion: reduce 设为真值。开发者只需在 CSS 中针对此条件编写覆盖规则，即可实现无感知的体验优化，无需 JavaScript 介入。

如何用CSS prefers-reduced-motion优化体验？

@media (prefers-reduced-motion: no-preference) {
  .hero {
    animation: slideIn 1s ease-out;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero {
    animation: none;
    opacity: 1;
  }
}

上述代码展示了标准写法。第一段规则仅在用户未指定偏好时应用动画；第二段规则在检测到 reduce 偏好时强制移除动画并立即显示元素。这种分层策略确保了默认行为与现代设备的兼容性，同时兼顾了特殊需求。

如何处理复杂的过渡效果？

对于涉及多个属性的复杂过渡，直接禁用可能导致布局突变。更稳妥的做法是保留关键帧但缩短持续时间，或者仅禁用非必要的装饰性动画。通过检查实际渲染结果，可以发现完全禁用 transition 会使页面交互显得生硬，因此建议结合 will-change 或静态样式进行微调。

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

如何用CSS prefers-reduced-motion优化体验？

.card {
  transition: transform 0.3s, opacity 0.3s;
}

@media (prefers-reduced-motion: reduce) {
  .card {
    transition: none;
  }
  .card:hover {
    transform: none;
  }
}

这段代码针对卡片悬停效果进行了处理。在减少运动模式下，不仅移除了过渡动画，还禁用了悬停时的变换效果，防止因鼠标移动引发的视觉干扰。这种处理方式适用于对平衡感要求较高的界面组件。