prefers-reduced-motion

语法

no-preference

表示用户未在其设备上做出任何偏好设置。此关键字值评估为 false。

reduce

表示用户已在其设备上启用减少运动的设置。reduce 关键字值评估为 true；因此，@media (prefers-reduced-motion) 等同于 @media (prefers-reduced-motion: 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

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

CSS

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

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

.animation {
  color: white;
  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;
  }
}

结果

您可以在您的设备上启用减少运动的设置，以查看动画缩放的变化。此示例使用背景颜色和文本上的线条，以视觉方式突出显示当设置启用或禁用时关键帧动画的切换。

规范

浏览器兼容性

另见

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