CSS媒体特性 - prefers-reduced-motion

CSS prefers-reduced-motion 媒体特性允许检查用户是否在其设备上启用了减少不必要动画的设置。此设置告知设备的浏览器，用户已选择一个移除、最小化或替换运动驱动动画的界面。

可能的值

no-preference − 此值表示用户未在其设备上指示任何特定偏好。此关键字值被视为 false。
reduce − 此值表示用户已在其设备上激活了减少运动设置。此关键字值被视为 true。

语法

prefers-reduced-motion: no-preference|reduce;

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

CSS prefers-reduced-motion - 示例

如果您启用了减少运动设置，此页面上的绿色方框将移动得更慢更平滑，背景将变为粉红色，文本将带有下划线。如果您没有启用减少运动设置，绿色方框将正常移动，背景将保持绿色。

pulse − 此动画使元素每四秒脉冲变化大小。
dissolve − 此动画使元素每两秒淡入淡出。

按照此链接上的步骤模拟 prefers-reduced-motion 模式并测试以下示例。

这是一个示例 −

Open Compiler

<html>
<head>
<style>
   .box {
      animation: pulse 4s linear;
      background-color: green;
      color: white;
      width: 160px;
      padding: 10px;
      border-radius: 5px;
   }
   @media (prefers-reduced-motion) {
      .box {
         animation: dissolve 2s linear;
         background-color: pink;
         text-decoration: overline;
      }
   }
   @keyframes pulse {
      0% {
         transform: scale(0.5);
      }
      50% {
         transform: scale(0.8);
      }
      100% {
         transform: scale(08.);
      }
   }
   @keyframes dissolve {
      0% {
         opacity: 0.7;
      }
      50% {
         opacity: 0.5;
      }
      100% {
         opacity: 0.7;
      }
   }
</style>
</head>
<body>
<div class="box">
   prefers-reduced-motion
</div>
</body>
</html>

CSS prefers-reduced-motion - no-preference 值

带有 (prefers-reduced-motion: no-preference) 的 @media 查询将为偏好减少运动的用户禁用动画（方框将保持静止）。

这是一个示例 −

Open Compiler

<html>
<head>
<style>
   .box {
      width: 220px;
      height: 100px;
      background-color: violet;
      animation: moveRight 2s linear infinite;
   }
   @keyframes moveRight {
      0% {
         transform: translateX(0);
      }
      100% {
         transform: translateX(100%);
      }
   }
   @media (prefers-reduced-motion: no-preference) {
      .box {
         animation: none; 
         transform: none; 
      }
   }
</style>
</head>
<body>
   <div class="container">
      <div class="box">prefers-reduced-motion: no-preference</div>
   </div>
</body>
</html>

CSS prefers-reduced-motion - reduce 值

带有 (prefers-reduced-motion: reduce) 的 @media 查询检查用户对减少运动的偏好。如果用户在其设备上启用了减少运动设置，则方框将连续循环地从左向右水平移动。

这是一个示例 −

Open Compiler

<html>
<head>
<style>
   .box {
      width: 220px;
      height: 100px;
      background-color: violet;
      animation: moveRight 2s linear infinite;
   }
   @keyframes moveRight {
      0% {
         transform: translateX(0);
      }
      100% {
         transform: translateX(100%);
      }
   }
   @media (prefers-reduced-motion: reduce) {
      .box {
         animation: none; 
      }
   }
</style>
</head>
<body>
   <div class="container">
      <div class="box">prefers-reduced-motion: reduce</div>
   </div>
</body>
</html>

下表显示如何在不同操作系统上的 Firefox 中启用减少运动

操作系统	如何在 Firefox 中启用减少运动
GTK/GNOME	设置 > 辅助功能 > 查看 > 减少动画
较旧版本的 GNOME	GNOME Tweaks > 常规选项卡（或外观，取决于版本）> 动画
Plasma/KDE	系统设置 > 工作区行为 -> 常规行为 > 将“动画速度”设置为“即时”
Windows 10	设置 > 轻松访问 > 显示 > 在 Windows 中显示动画
Windows 11	设置 > 辅助功能 > 视觉效果 > 动画效果
macOS	系统偏好设置 > 辅助功能 > 显示 > 减少运动
iOS	设置 > 辅助功能 > 运动
Android 9+	设置 > 辅助功能 > 删除动画
Firefox about:config	添加一个名为 ui.prefersReducedMotion 的数字首选项，并将其值设置为 0 表示完全动画，或设置为 1 表示偏好减少运动。

打印页面