prefers-reduced-motion - CSS（层叠样式表） 编辑

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+ 上：设置 > 辅助性 > 移除动画。

例子

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

HTML

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

CSS

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

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

.animation {
  background-color: rebeccapurple;
  color: #fff;
  font: 1.2em Helvetica, arial, sans-serif;
  width: 200px;
  padding: 1em;
  border-radius: 1em;
  text-align: center;
}

/* ----------------------------------------------
 * Generated by Animista on 2018-9-2 13:47:0
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation vibrate-1
 * ----------------------------------------
 */

@keyframes vibrate {
  0% {
            transform: translate(0);
  }
  20% {
            transform: translate(-2px, 2px);
  }
  40% {
            transform: translate(-2px, -2px);
  }
  60% {
            transform: translate(2px, 2px);
  }
  80% {
            transform: translate(2px, -2px);
  }
  100% {
            transform: translate(0);
  }
}

Result

规范

Specification	Status	Comment
Media Queries Level 5 prefers-reduced-motion	Editor's Draft	Initial definition.

浏览器兼容性

BCD tables only load in the browser

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

参考

• An introduction to the reduced motion media query