prefers-reduced-motion

警告： 此页面底部有一个嵌入式示例，其缩放运动可能对某些读者造成问题。患有前庭运动障碍的读者可能希望在观看动画前启用设备上的减少运动功能。

prefers-reduced-motion CSS 媒体特性用于检测用户是否在其设备上启用了设置以最大限度地减少非必要运动量。该设置用于向设备上的浏览器传达用户更喜欢移除、减少或替换基于运动的动画的界面。

此类动画可能会导致患有前庭运动障碍的人感到不适。缩放或平移大型物体等动画可能是前庭运动触发器。

css

@media (prefers-reduced-motion) {
  /* styles to apply if a user's device settings are set to reduced motion */
}

语法

no-preference: 表示用户在其设备上未表明任何偏好。此关键字值评估为假。
reduce: 表示用户在其设备上启用了减少运动的设置。此关键字值评估为真。

用户偏好

对于 Firefox，如果以下情况成立，则会遵守 reduce 请求

在 GTK/GNOME 中：设置 > 辅助功能 > 视觉 > 减少动画已打开。
- 在旧版本的 GNOME 中，GNOME Tweaks > 常规选项卡（或外观，具体取决于版本） > 动画已关闭。
- 或者，将 gtk-enable-animations = false 添加到 GTK 3 配置文件的 [Settings] 块中。
在 Plasma/KDE 中：系统设置 > 工作区行为 - > 常规行为 > “动画速度” 设置为最右边的“立即”。
在 Windows 10 中：设置 > 轻松使用 > 显示 > 在 Windows 中显示动画。
在 Windows 11 中：设置 > 辅助功能 > 视觉效果 > 动画效果
在 macOS 中：系统偏好设置 > 辅助功能 > 显示 > 减少运动。
在 iOS 中：设置 > 辅助功能 > 运动。
在 Android 9+ 中：设置 > 辅助功能 > 移除动画。
在 Firefox 的 about:config 中：添加一个名为 ui.prefersReducedMotion 的数字首选项，并将它的值设置为 0（表示完全动画）或 1（表示偏好减少运动）。对该首选项的更改会立即生效。

示例

此示例使用缩放动画来演示 prefers-reduced-motion。如果您在设备上的辅助功能偏好设置中启用了减少运动设置，prefers-reduced-motion 媒体查询将检测到您的偏好，并且具有相同特异性但在 CSS 源代码顺序中排在后面的减少运动规则中的 CSS 将优先。因此，盒子上的动画将淡化为 dissolve 动画，这是一种更柔和的动画，不会触发前庭运动。

淡化动画缩放

HTML

html

<div class="animation">animated box</div>

CSS

css

.animation {
  animation: pulse 1s linear infinite both;
  background-color: purple;
}

/* Tone down the animation to avoid vestibular motion triggers. */
@media (prefers-reduced-motion) {
  .animation {
    animation: dissolve 4s linear infinite both;
    background-color: green;
    text-decoration: overline;
  }
}

.animation {
  color: #fff;
  font: 1.2em sans-serif;
  width: 10em;
  padding: 1em;
  border-radius: 1em;
  text-align: center;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(0.9);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes dissolve {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}

结果

您可以在您的设备上启用减少运动设置，以查看动画缩放的改变。此示例使用背景颜色和文本上的线条来直观地突出显示关键帧动画在设置启用或禁用时切换的时刻。

规范

规范
媒体查询级别 5 # prefers-reduced-motion

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参见

Sec-CH-Prefers-Reduced-Motion HTTP 头部用户代理客户端提示
关于减少运动媒体查询的介绍，发表于 CSS-Tricks (2019)
面向运动的响应式设计，发表于 WebKit 博客 (2017)