此页面由 Cloud Translation API 翻译。

首选减压：有时运动越少

Preferreds-reduced-motion 媒体查询可检测用户是否已请求操作系统，以尽可能减少其使用的动画或动作量。

Thomas Steiner

并非每个人都喜欢装饰性动画或转场效果，有些用户会直接体验到动画效果使用视差滚动、缩放效果等特效。用户偏好设置媒体 “prefers-reduced-motion”查询可让您针对都表明了这种偏好

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

现实生活和网络上的动作过多

前几天，我和孩子们一起滑冰。今天天气不错，阳光明媚，结冰溜冰场上挤满了人 ⛸。唯一的问题是：我不太擅长与人相处。如此一来，很多移动的目标，我都无法专注于任何事情，最终会迷失方向，感到无所不能这就像凝视着蚂蚁 🐜?。

这种情况偶尔会在网络上出现：闪烁的广告、奇妙的视差效果、令人惊讶的动画、自动播放视频等等，网络有时可能会变得不堪重负... 值得高兴的是，与现实生活不同，这个问题有解决办法。CSS 媒体查询 prefers-reduced-motion 可让开发者为偏好的用户创建网页变体减少动作。包括禁止自动播放视频停用某些纯装饰效果，对特定用户彻底重新设计网页。

在深入了解这一功能之前，我先回过头来想一想动画的用途。如果需要，您还可以跳过背景信息，直接查看技术细节

网页上的动画

动画常常用于向用户提供反馈，例如告诉他们收到并正在处理一个操作。例如，在购物网站上显示动画效果，以便“飞行”放入虚拟购物车中，此图标显示在。

另一个应用场景是利用运动入侵用户感知通过结合使用骨架屏幕、上下文元数据和低质量图片预览来占用大量用户时间，并使整个体验更加快速。其思路是同时尽快加载内容

最后还有装饰性效果，如动画渐变、视差滚动、背景视频，以及其他几个视频。虽然许多用户喜欢这种动画，但也有一些用户不喜欢它们，他们会感到分心或拖慢速度在最糟糕的情况下，用户甚至可能会就像是真实的体验一样，因此对于这些用户来说，减少动画相当于医疗必要性。

运动触发的前片声谱障碍

部分用户体验动画内容让人分心或恶心。例如，如果滚动动画的主要元素不是主要元素，与滚动相关的元素会大幅移动。例如，视差滚动动画可能会导致前景障碍，因为背景元素的移动速度与前景不同元素。前庭（内耳）障碍反应包括头晕、恶心和偏头痛头痛，有时需要卧床休息才能恢复。

在操作系统上移除动态效果

许多操作系统都有无障碍设置，用于指定使用较低会长时间保持不动以下屏幕截图显示了 macOS Mojave 的 Reduce motion 偏好设置， Android Pie 的移除动画偏好设置。选中后，这些偏好设置会致使系统不得使用装饰效果，例如应用启动动画。应用程序本身可以也应遵从此设置，并移除所有不必要的动画。

移除网页上的动画

媒体查询级别 5：减少动态网络用户偏好通过媒体查询，作者可以测试和查询值或功能用户代理或显示设备的信息，这与呈现的文档无关。媒体查询已使用 prefers-reduced-motion 来检测用户是否设置了操作系统偏好设置来尽可能减少动画播放次数或动画。它可能有两个可能的值：

no-preference：表示用户在底层操作中没有偏好系统。此关键字值在布尔值上下文中的求值结果为 false。
reduce：表示用户已设置操作系统偏好设置，以表明界面应尽可能减少移动或动画，最好达到所有非必要移动。

处理来自 CSS 和 JavaScript 上下文的媒体查询

与所有媒体查询一样，prefers-reduced-motion 可以从 CSS 上下文和 JavaScript 上下文。

为了说明两者，假设我有一个重要的注册按钮，希望用户点击。我可以定义一种引人注目的“振动”但作为一名网络达人只适合那些明确愿意使用动画的用户，而不是其他所有人，比如既能接受动画的用户，选择退出动画的用户，或者使用无法理解媒体查询的浏览器的用户。

/*
  If the user has expressed their preference for
  reduced motion, then don't use animations on buttons.
*/
@media (prefers-reduced-motion: reduce) {
  button {
    animation: none;
  }
}

/*
  If the browser understands the media query and the user
  explicitly hasn't set a preference, then use animations on buttons.
*/
@media (prefers-reduced-motion: no-preference) {
  button {
    /* `vibrate` keyframes are defined elsewhere */
    animation: vibrate 0.3s linear infinite both;
  }
}

注意：如果您有大量与动画相关的 CSS，可以将所有与动画相关的 CSS 外包给单独的样式表，这样，您就可以让那些没有选择访问该 CSS 的用户免去下载这些 CSS 的麻烦，并且仅在有条件地使用 link 元素上的 media 属性加载它 😎?: <link rel="stylesheet" href="animations.css" media="(prefers-reduced-motion: no-preference)">

为了说明如何通过 JavaScript 使用 prefers-reduced-motion，假设我有使用 Web Animations API。虽然 CSS 规则将在用户偏好设置发生更改时由浏览器动态触发，对于 JavaScript 动画，我必须自己监听更改，然后手动停止可能正在飞行动画（如果用户允许我重新启动它们）：

const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
mediaQuery.addEventListener('change', () => {
  console.log(mediaQuery.media, mediaQuery.matches);
  // Stop JavaScript-based animations.
});

请注意，实际媒体查询前后必须加上括号：

错误做法

window.matchMedia('prefers-reduced-motion: reduce');

正确做法

window.matchMedia('(prefers-reduced-motion: reduce)');

处理来自 `<picture>` 上下文的媒体查询

一个有趣的用例是，使动画 AVIF、WebP 或 GIF 的播放依赖于 media 属性。如果 (prefers-reduced-motion: no-preference) 的求值结果为 true，则可放心显示动画版本，否则显示静态版本：

<picture>
  <!-- Animated versions. -->
  <source
    srcset="nyancat.avifs"
    type="image/avif"
    media="(prefers-reduced-motion: no-preference)"
  />
  <source
    srcset="nyancat.gif"
    type="image/gif"
    media="(prefers-reduced-motion: no-preference)"
  />
  <!-- Static versions. -->
  <img src="nyancat.png" alt="Nyan cat" width="250" height="250" />
</picture>

请参见以下示例。尝试切换设备的动作偏好设置，查看不同之处。

著名的彩虹猫。

在请求时发现用户的偏好设置

Sec-CH-Prefers-Reduced-Motion 客户端提示标头允许网站在请求时获取用户的动作偏好设置，出于性能原因，允许服务器内嵌正确的 CSS。

演示

我根据 Rogério Vicente 的精彩作品 🐈? HTTP 状态猫。首先，花点时间欣赏一下这个笑话，搞笑，我会等。现在您回来了，我来介绍一下演示。滚动时，每个 HTTP 状态猫交替从右侧或左侧交替显示。流畅的 60 FPS 但正如前面介绍的那样，有些用户可能不喜欢它，甚至会对它产生动作反应，因此演示的编程遵循 prefers-reduced-motion。这甚至可以是动态生成的即时更改偏好设置，无需重新加载。如果用户更喜欢减少动作，不必要的显示动画消失，只留下常规的滚动动作。通过以下抓屏展示了实际演示：

</ph>

prefers-reduced-motion 演示应用

总结

尊重用户偏好对现代网站来说非常关键，随着浏览器越来越多地表明以便 Web 开发者能够做到这一点。另一个已发布的示例是 prefers-color-scheme，检测用户更喜欢浅色还是深色配色方案。您可以在发布商学院中 prefers-color-scheme，在我的文章 Hello Darkness, My Old Friend 🌒? 中提及。

CSS 工作组正在开展更多标准化工作用户偏好设置媒体查询 prefers-reduced-transparency （检测用户是否希望降低透明度）， prefers-contrast（检测用户是否已请求系统提高或降低相邻颜色之间的对比度），和 inverted-colors（检测用户是否倾向于使用反色）。

（额外知识）在所有网站上强制减少移动

并非所有网站都会使用 prefers-reduced-motion，也可能不是足够符合您的喜好。如果出于任何原因，您确实想在所有网站上设置定格动画，您完全可以。让就是在您访问的每个网页中插入包含以下 CSS 的样式表。那里有几个浏览器扩展程序也需自行承担风险！

@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
    transition-delay: -1ms !important;
  }
}

其工作原理是，之前的 CSS 会替换所有动画和过渡的时长以至于用户就看不到了由于某些网站依赖于动画才能正常运行（也许某个步骤取决于 animationend 事件），更激进的 animation: none !important; 方法行不通。即使是以前的黑客行为保证在所有网站上都能成功（例如，不能采用 Web Animations API），因此请务必并在发现应用出现损坏时将其停用

致谢

向已实施 Google Cloud 解决方案的 Stephen McGruer 表示诚挚的感谢 prefers-reduced-motion Rob Dodson 也审核了此文档。主打图片，由 Hannah Cauhepe 在 Un 创办网站上使用。

首选减压：有时运动越少

现实生活和网络上的动作过多

网页上的动画

运动触发的前片声谱障碍

在操作系统上移除动态效果

移除网页上的动画

处理来自 CSS 和 JavaScript 上下文的媒体查询

处理来自 <picture> 上下文的媒体查询

在请求时发现用户的偏好设置

演示

总结

（额外知识）在所有网站上强制减少移动

相关链接

致谢

处理来自 `<picture>` 上下文的媒体查询