减少动态效果
闪烁和闪动的动画对于患有注意力缺陷多动症 (ADHD) 等认知问题的人来说可能存在问题。此外，某些类型的运动可能会触发前庭疾病、癫痫、偏头痛和视网膜感光敏感症。根据用户的偏好减少动画或完全关闭动画也可以使电量不足或低端设备的用户受益。
prefers-reduced-motion 媒体查询允许为已将其操作系统辅助功能偏好设置为减少动态效果的用户提供较少动画和过渡的体验。它有两个可能的值：
no-preference-
表示用户未向系统表明任何偏好。
reduce-
表示用户已通知系统，他们偏好将运动量或动画量降至最低的界面，最好是移除所有非必要的运动。
示例
除非你在你的辅助功能偏好设置中开启“减少动态效果”，否则此示例将显示烦人的动画。
HTML
html
<div class="animation">animated box</div>
CSS
css
.animation {
animation: vibrate 0.3s linear infinite both;
}
@media (prefers-reduced-motion: reduce) {
.animation {
animation: none;
}
}
prefers-reduced-motion 的值是 reduce，而不是“none”。此偏好并不意味着必须移除所有动画，这可以通过 * {animation: none !important;} 实现。相反，用户希望禁用动态动画，包括那些由用户交互触发的动画，除非动画对于功能或所传达的信息至关重要（请参阅WCAG：来自交互的动画）。