CSS prefers-reduced-motion 怎样关闭非必要动画

如果页面把轮播、缩放、位移和渐变都写成默认动效，用户在系统里打开“减少动效”后，最稳妥的处理不是给所有元素强行加 animation: none，而是用 @media (prefers-reduced-motion: reduce) 精确覆盖非必要运动。这样既尊重用户偏好，也不会把加载、完成、焦点等必要状态反馈一起抹掉。

本文只解决一个问题：怎样用 CSS 关闭非必要动画，并判断规则是否真正生效。核心做法可以先记成三点：

• 把完整动效放在默认样式，减少动效规则放在后面。
• 优先覆盖具体组件的 animation、transition 和平滑滚动。
• 把“装饰性运动”和“传达状态的变化”分成两组处理。

先判断用户的动效偏好

prefers-reduced-motion 只有两个常用值：reduce 表示用户请求尽量减少运动，no-preference 表示系统没有声明偏好。这里的 reduce 不是 CSS 值 none，也不等于“页面所有动画都必须消失”；它描述的是用户对非必要运动的偏好。

因此，媒体查询应当成为组件样式的一个覆盖边界，而不是单独的动画开关。默认规则负责完整体验，reduce 分支负责收敛幅度、取消位移，或者把运动替换成透明度和颜色变化。

最小写法：在 reduce 分支关闭非必要动画

下面的写法适合轮播提示、装饰性浮动、按钮缩放等非必要运动。关键点是媒体查询放在默认规则之后，并保持相近的选择器具体性，让后面的声明自然覆盖前面的声明。

.notice-card {
  /* 默认状态保留轻微的进入动画，帮助用户发现新内容。 */
  animation: notice-in 240ms ease-out;
  transition: transform 180ms ease, box-shadow 180ms ease;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  .notice-card {
    /* 用户请求减少动效时，取消位移和连续动画。 */
    animation: none;
    transition: none;
    scroll-behavior: auto;
  }
}

@keyframes notice-in {
  /* 用透明度配合小幅位移表达默认进入效果。 */
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

如果只想减弱而不是完全关闭，可以把 animation: none 替换成更慢、更小幅度的透明度变化；但不要把 reduce 写成 (prefers-reduced-motion: none)，后者不是该媒体特性的合法值。

把非必要动画与必要反馈分开

最容易出现的误区是写一个全局的 * { animation: none !important; }。它可能让装饰动效消失，却同时破坏组件对加载中、完成、焦点或错误状态的表达。更稳妥的边界是：只对装饰性类名做覆盖，必要反馈保留静态颜色、边框或文本变化。

.loading-indicator {
  /* 默认用旋转表达“仍在处理”，属于非必要运动。 */
  animation: spin 900ms linear infinite;
}

.save-status.is-complete {
  /* 完成状态靠颜色和文本表达，不依赖运动。 */
  color: #18794e;
  border-color: #18794e;
}

@media (prefers-reduced-motion: reduce) {
  .loading-indicator {
    /* 减少动效时取消旋转，但保留元素和加载语义。 */
    animation: none;
  }

  .save-status.is-complete {
    /* 状态反馈继续可见，不在这里清空颜色或边框。 */
    transition: none;
  }
}

规则不生效时，先查覆盖关系再回滚

当系统已经打开减少动效但页面仍在运动，先检查三件事：媒体查询是否写成 reduce；覆盖规则是否出现在默认规则之后；组件是否使用了更具体的选择器或内联样式。媒体查询本身没有“强制优先级”，它仍然遵守层叠、具体性和源码顺序。

回滚也很简单：保留默认动效规则，暂时移除对应的 reduce 覆盖块，再按组件逐个恢复，而不是删除整套 @keyframes。如果项目用 CSS 图层或组件样式隔离，要把覆盖写进实际生成该动画的同一边界，并用浏览器的媒体状态模拟功能分别观察 reduce 与 no-preference。

最后确认三个结果：非必要位移或旋转不再持续；焦点、完成、错误等状态仍可辨认；取消减少动效偏好后，默认动效能够恢复。做到这三点，说明“关闭非必要动画”没有误伤交互语义。

常见问题

prefers-reduced-motion 能不能直接写成 animation: none？

不能。prefers-reduced-motion 是媒体特性，正确写法是 @media (prefers-reduced-motion: reduce)。在媒体查询内部，才根据组件边界决定使用 animation: none、缩小运动幅度，或保留必要反馈。

打开减少动效后，为什么还有过渡效果？

常见原因是只覆盖了 animation，没有处理 transition；也可能是规则的选择器不够具体，或者另一个组件样式在后面重新声明了过渡。沿着“媒体值、选择器具体性、源码顺序”三项排查即可。

CSS 的减少动效支持本质上是一个尊重用户偏好的样式边界：默认体验可以有动效，但非必要运动必须能被收敛；必要状态必须保留可读、可感知的替代表达。