无动画并不总是 prefers-reduced-motion

当谈到媒体查询 prefers-reduced-motion 时，我经常看到一个代码片段。 这里就是它

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

这段 CSS 试图在用户在操作系统可访问性偏好中指定了对减少运动的偏好时，消除网站上的任何运动。

为什么 prefers-reduced-motion 重要

此设置存在的原因是屏幕运动是可访问性问题。 埃里克·贝利（Eric Bailey）的这篇文章

前庭障碍 会导致你的前庭系统难以理解正在发生的事情，从而导致失去平衡和眩晕、偏头痛、恶心和听力损失。 任何曾经快速旋转的人都会熟悉迷糊的前庭系统。

前庭障碍可能由遗传和环境因素引起。 它是更大范围的 疾病谱 的一部分，它构成了可访问性问题，并影响着超过 7000万人.

他在 后续文章 中再次阐述了这一点。

如果你有前庭障碍或某种偏头痛或癫痫发作的诱因，浏览网页就像在雷区行走 — 你永远都可能在点击一下就会触发一个未经宣布的动画。 仅仅是随便浏览一下就已经很糟糕了。

减少运动 vs. 摧毁运动

知道了这些，你可能会非常想在用户指定了减少运动偏好时，彻底消灭运动。 问题是——引用埃里克的话——“动画并非多余”。 有些动画可能是多余的，但动画也可以 帮助可访问性。 例如，一个 “过渡界面”（例如，一个列表通过动画打开一个新项目滑入其中的空间）可能非常有用

动画可以成为一个很棒的工具，通过使用它来分解复杂的概念，或者传达看似无关的对象之间的关系，来帮助对抗某些认知障碍。 瓦尔·海德（Val Head）在 A List Apart 上的文章 强调了一些其他的 经过充分研究的好处，包括帮助提高解决问题的能力、回忆和技能获取，以及减少 认知负荷 和对 变化盲视 的敏感性。

在这种情况下，如果你只是把所有运动都消灭了，你就会失去有用的上下文运动。 在 prefers-reduced-motion 场景中，你可能只想采用不同的方法。 或许可以减少运动量，降低速度，或移除运动，同时更加依赖颜色和淡出过渡。

本·纳德尔（Ben Nadel）最近写了一篇文章 “将多个动画 @keyframes 应用于 CSS 中支持 Prefers-Reduced-Motion” 并讨论了一个类似的例子。 模态入口动画默认使用淡入和缩放效果。 然后，在 prefers-reduced-motion 场景中，它使用淡入效果，但不使用缩放效果。 缩放效果会导致运动，而淡入效果则不会。

/* 
  By default, we'll use the REDUCED MOTION version of the animation.
*/
@keyframes modal-enter {
  from {
    opacity: 0 ;
  }
  to {
    opacity: 1 ;
  }
}

/*
  Then, if the user has NO PREFERENCE for motion, we can OVERRIDE the
  animation definition to include both the motion and non-motion properties.
*/
@media ( prefers-reduced-motion: no-preference ) {
  @keyframes modal-enter {
    from {
      opacity: 0 ;
      transform: scale(0.7) ;
    }
    to {
      opacity: 1 ;
      transform: scale(1.0) ;
    }
  }
}

查看 Ben 网站上的 GIF 演示，如果你想快速比较一下。

我喜欢这种方法，它 思考问题并提出减少运动的解决方案，而不是 全部取消，没有运动！

但并非所有运动都由 CSS 驱动

在我们谈论那个彻底消除所有运动的 CSS 代码片段的同时，请注意，它只有在所有运动 完全由 CSS 驱动 的网站上才能有效地实现它的目标。 如果你正在使用 JavaScript 驱动的动画，请注意，这个核武器级代码片段可能会…… 好吧 约书亚·科莫（Josh Comeau）的这篇文章

如果你的动画完全由 CSS 驱动，那么它效果很好…… 但是我在 JS 中运行动画时遇到过奇怪的问题。 具体来说，我看到这个重置产生了相反的效果，使动画 变得超级快，令人眼花缭乱。

没错：它可能与你想要做的事情完全相反。