prefers-reduced-motion

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

CSS 媒体查询特性 prefers-reduced-motion 用于检测用户的系统是否被开启了动画减弱功能。

语法

no-preference

用户未修改系统动画相关特性。

reduce

这个值意味着用户修改了系统设置，将动画效果最小化，最好所有的不必要的移动都能被移除。

用户偏好

在火狐中，满足以下条件则 reduce 会生效：

  • 在 GTK/Gnome 中，可以通过 GNOME Tweaks（在“通用”或“外观”菜单中，取决于具体版本）的配置，设置 gtk-enable-animations 的值为 false。

  • 在 Windows 10 中：设置 > 轻松获取 > 显示 > 在 Windows 中显示动画。

  • 在 Windows 7 中：控制面板 > 轻松获取 > ?是计算机更易于查看 > 关闭不必要动画。

  • 在 MacOS 中：系统偏好 > 辅助使用 > 显示 > 减少运动。

  • 在 iOS 上：设置 > 通用 > 辅助性 > 减少运动。

  • 在 Android 9+ 上：设置 > 辅助性 > 移除动画。

例子

下面的例子将会展示一组令人心烦的动画，不过当你开启了系统的“减少运动”后就能看到动画减弱的效果了。

HTML

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

CSS

css
.animation {
  animation: vibrate 0.3s linear infinite both;
}

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

Result

规范

Specification
Media Queries Level 5
# prefers-reduced-motion

浏览器兼容性

BCD tables only load in the browser

参考