CSS prefers-reduced-motion 减弱动画

CSS媒体特性prefers-reduced-motion：检测用户系统动画偏好、为无障碍提供静态替代方案、@media (prefers-reduced-motion: reduce) {} · 难度：入门 · +10XP

CSS prefers-reduced-motion —— 让网页对晕动症用户友好

有些用户对屏幕上的大幅动画敏感——快速移动、闪烁、旋转可能导致眩晕甚至诱发癫痫。操作系统提供了"减少动画"的无障碍设置，CSS 可以用 prefers-reduced-motion 来读取它。

基本用法

/* 正常情况下：有动画 */
.hero-banner {
  animation: slideInFromLeft 0.5s ease;
}
/* 用户开启了"减少动画" */
@media (prefers-reduced-motion: reduce) {
  .hero-banner {
    animation: none;  /* 完全禁用动画 */
  }
}

不只是关闭——也可以减弱

@media (prefers-reduced-motion: reduce) {
  /* 全局减弱所有动画：设为极短时长，几乎不可见但保留过渡状态 */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

两种取值

动手练习

1. 基础练习：在你之前做了动画效果的页面中加入 prefers-reduced-motion 适配。打开系统设置（Windows：设置→辅助功能→显示→在Windows中显示动画）关闭动画，刷新页面验证。
2. 进阶应用：不直接禁用动画，而是把大幅的平移动画替换为渐隐渐现（opacity过渡），让所有用户都有平滑但不刺激的体验。
3. 项目实战：检查你项目中使用的第三方UI库或动画库（如AOS、Animate.css），看看它们是否尊重 prefers-reduced-motion。如果不支持，通过全局CSS加上适配。

接下来学什么？

下一课学习 font-variant 字体变体——探索小型大写字母、数字变体等高级排版功能。