#yyds干货盘点#没有运动并不总是喜欢减少运动

原创

liuhao951866 2022-02-26 07:01:17 博主文章分类：知识加深 ©著作权

文章标签 css 首选项缩放 文章分类 JavaScript 前端开发 yyds干货盘点

©著作权归作者所有：来自51CTO博客作者liuhao951866的原创作品，请联系作者获取转载授权，否则将追究法律责任

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，它试图在用户在其操作系统的可访问性首选项中指定减少运动的首选项的情况下消除网站上的任何运动。

#yyds干货盘点#没有运动并不总是喜欢减少运动_缩放

为什么`prefers-reduced-motion`重要

存在此设置的原因是屏幕上的移动是一个可访问性问题。这是埃里克·贝利：

前庭疾病会导致您的前庭系统难以理解正在发生的事情，从而导致失去平衡和眩晕、偏头痛、恶心和听力损失。任何旋转过快的人都熟悉混乱的前庭系统。
前庭疾病可能由遗传和环境因素引起。它是构成可访问性问题的更广泛条件的一部分，它影响了超过 7000 万人。

在这里，他再次出现在后续文章中：

如果您患有前庭疾病或患有某些类型的偏头痛或癫痫发作，那么浏览网络就像在雷区中行走一样 ——您永远只需单击一下即可激活未宣布的动画。这只是用于随意浏览。

减少运动与核运动

知道了这一点，当用户指定减少的运动偏好时，可能会很想对运动进行核对并完全消除它。问题在于——再次引用 Eric 的话——“动画不是不必要的。” 其中一些可能是，但动画也可以帮助可访问性。例如，一个“过渡界面”（例如，一个动画列表，可以让一个新项目滑入其中）可以非常有用：

动画可以成为一个很好的工具，通过使用它来分解复杂的概念或传达看似不同的对象之间的关系，从而帮助对抗某些形式的认知障碍。 Val Head 在 A List Apart上的文章重点介绍了其他一些经过充分研究的好处，包括帮助提高解决问题的能力、回忆和技能获取，以及减少认知负荷和改变失明的敏感性。

在这种情况下，如果您只是将其全部删除，您将失去有用的上下文运动。prefers-reduced-motion在某个场景中，您可能只想采用不同的方法。也许更少、更慢或移除运动，同时更倾向于颜色和褪色过渡。

Ban Nadel 最近写了“Applying Multiple Animation @keyframes To Support Prefers-Reduced-Motion In CSS”并介绍了一个类似的例子。默认情况下，模态入口动画同时使用淡入和缩小效果。然后，在一个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) ;
    }
  }
}