css media prefers-reduced-motion

2022-06-16 494 阅读1分钟

prefers-reduced-motion

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

语法

no-preference

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

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

用户偏好

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

在 GTK/Gnome 中，可以通过 GNOME Tweaks （在“通用”或“外观”菜单中，取决于具体版本）的配置，设置 gtk-enable-animations 的值为 false。
- 可以在 GTK 3 的配置文件中的 [Settings] 模块下设置 gtk-enable-animations = false。
在 Windows 10 中：设置 > 轻松获取 > 显示 > 在 Windows 中显示动画。
在 Windows 7 中：控制面板 > 轻松获取 > ?是计算机更易于查看 > 关闭不必要动画。
在 MacOS 中：系统偏好 > 辅助使用 > 显示 > 减少运动。
在 iOS 上：设置 > 通用 > 辅助性 > 减少运动。
在 Android 9+ 上：设置 > 辅助性 > 移除动画。

例子

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

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