使用 CSS 减少运动

操作系统提供不同的辅助功能设置，使用户能够在使用电脑时自定义和个性化他们的体验。其中一项设置是“减少动态效果”选项。

“减少动态效果”功能对容易眩晕或晕动症的人很有用。启用此功能后，操作系统会减少屏幕上元素的移动（或完全停止移动）。

prefers-reduced-motion

CSS 中有一种方法可以检查用户是否启用了媒体prefers-reduced-motion功能。

它有两个可能的值：

• no-preference用户未就此事指定任何偏好或已禁用。
• reduce用户明确表示他们想要移除或替换基于动作的动画。

即使我们不指定值，它也能正常工作。媒体查询中设置的任何值都只会在用户选择减少动态效果时执行。

这里是移除动画和过渡效果的好地方。它们对大多数用户来说都没问题，但如果他们启用了“减少动态效果”选项，我们就不会向他们显示这些动画效果：

/* disable all animations and transitions if reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

超越动画和转场

虽然在用户选择降低电脑运动幅度时，禁用 ` animationand` 和 ` or` 属性显然是必要的，但它们并非唯一需要考虑禁用的属性。还有其他一些属性也应该考虑禁用：transition

• scroll-behavior：指定页面内滚动的方式。默认情况下，滚动会直接从一个部分跳到另一个部分；但如果值为真，smooth则会有一个较小的过渡效果，在减少动画效果的模式下，我们可能需要避免这种过渡效果。
• scroll-snap-type滚动捕捉功能虽然很酷，但也可能带来一些辅助功能方面的问题。启用滚动捕捉后，页面会自动滚动到指定区域，这可能并非用户所期望或想要的。
• marquee-style这是一个非标准属性，只会影响<marquee>Safari 浏览器（无论如何您都不应该使用它，而且可能需要添加webkit浏览器前缀）。如果该属性值为 `false` none，则会阻止页面上的所有跑马灯效果。

开发时，请记住要尊重用户的“减少运动”设置。prefers-reduced-motion.