CSS媒体查询prefers-reduced-motion是一项规则，该规则可以检查用户在系统偏好中“减少运动”的可访问性设置。它不是浏览器，网站或会话依赖性的，而是用户计算机本身上的设置。此媒体查询使我们作为开发人员可以根据用户对动画的偏好更新任何样式。
此媒体查询的目的是为所有用户创造舒适的体验。动画可能会给神经差异用户引起不适，甚至疼痛，其中包括患有前庭障碍的人和由于多动症，双相情感障碍，抑郁症或焦虑症而容易引起注意的人。其他用户可能希望打开“减少运动”，以最大程度地减少干扰或减少认知负荷。
问题是，如果选择“减少运动”，并非所有网站都适应用户的愿望并停止动画。
当用户选择“减少运动”时，这并不一定意味着他们根本不希望有运动。某些动画对于提供视觉反馈的用户体验非常有用：一个不旋转的加载旋转器可以使用户认为该站点是冻结的，在您单击时，按钮更改了比例，它可以强调已单击它。在处理大量的视差效果，滚动劫持和涵盖大量屏幕空间的动画时，减少运动是最有益的，因为这些屏幕空间最有可能引起对运动敏感用户的问题。
开发人员使用prefers-reduced-motion媒体查询的最初本能可能是在单个选择器基础上停止动画：
@media screen and (prefers-reduced-motion) {
animation: none;
transition: none;
}
这可能会引起问题，因为动画可能会遇到其初始值（即不透明度：0，位置不在屏幕上）。
我们想要一个更全球的解决方案，这将使想要更少运动的用户更容易开发。我们还需要动画演奏，以使元素最终到达所需的终点，同时又不注意动画之间的中间状态。我们可以使用动画和过渡duration属性来迫使动画以如此快的速度运行，以至于无法说明动画。
在我们的CSS的根级别中，我们称为减少动作媒体查询并定位特定类，该类别将“关闭”这些元素的动画。
一个更全球和适应性的解决方案：
@media only screen and (prefers-reduced-motion) {
.reduce-motion,
.reduce-motion::before,
.reduce-motion::after {
animation-delay: 0s !important;
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .0001ms !important;
transition-delay: 0s !important;
}
}
随着我们的开发，我们可以将类reduce-motion添加到我们认为对用户体验不需要的任何元素中，或者可能会给运动敏感用户引起不适。
当我们尝试尽可能少地使用!important属性时，这是在这里的宝贵用途，因为重点是将任何动画和过渡属性的全球覆盖范围进一步替代。
这不一定是一个完美的解决方案，但是重要的是要进行有关不同人如何体验网络的对话。为了构建更多包容性的网站，我们需要倾听人们遇到的问题并使用我们可以使用的任何工具来解决这些问题。
有助于告知本文的资料：