prefers-reduced-motion

• CSS

前庭系统（Vestibular System）位于人的内耳，对于人的运动和平衡能力起关键性的作用（来源）。一般常见的晕动病（Motion Sickness）就与前庭系统有关：当人眼所见到的运动与前庭系统感觉到的运动不相符时，就会有昏厥、恶心、食欲减退等症状出现（来源）。这其中，就包括了看网页上的各种动画引起的身理上的不适。需要注意的是，除了前庭系统受损外，随着年龄的增长，器官功能本身也在衰退，这些都有可能造成晕动病的症状。根据 vestibular.org 给出的数据，在美国，年龄四十及以上的成年人中，至少有 35% 的人受前庭系统疾病的困扰。显然，这不是一个小众的问题。

在各类操作系统中，都有类似的配置来减少动画，以减轻使用者的负担。比如：

  1. Windows 10 可以在 Settings > Ease of Access > Display > Show animations 中配置；
  2. MacOS 可以在 System Preferences > Accessibility > Display > Reduce motion 中配置；
  3. iOS 可以在 Settings > General > Accessibility > Reduce Motion 中配置；
  4. Android 9+ 可以在 Settings > Accessibility > Remove animations 中配置。

（完整的设置列表可以参考 MDN 列出的数据）

然而，这些是系统层面的设置，对应的是系统的一些行为。在 Web 中，可以通过 prefers-reduced-motion 这个媒体选择器来获取当前系统配置的信息。这个选择器可能的值分别是：no-preference 和 reduce，其中后者表示用户进行了减少动画的配置。

一个简单的使用例子：

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

如此，在一般的浏览器中，.something 元素可以有一些动画效果；但是当用户配置了减少动画之后，就不再显示任何动画效果。和 Dark Mode 的配置类似（对应的笔记见这里），除了 CSS 之外，也可以从 JavaScript 和 HTML 的层面响应这一媒体选择器：

const reduceAnimation =
  window.matchMedia('(prefers-reduced-motion: reduce)').matches;
<picture>
  <source srcset="static-image.jpg" media="(prefers-reduced-motion: reduce)">
  <img src="eye-catching-animation.gif">
</picture>

浏览器的兼容性可以查看 Caniuse。

注：可以把这个媒体选择器看作一种渐进增强的功能，浏览器的适配情况不必太过在意。