prefers-reduced-motion

语法

no-preference

用户未修改系统动画相关特性。

reduce

这个值意味着用户修改了系统设置，将动画效果最小化，最好所有的不必要的移动都能被移除。

用户偏好

在火狐中，满足以下条件则 reduce 会生效：

• 在 GTK/Gnome 中，可以通过 GNOME Tweaks（在“通用”或“外观”菜单中，取决于具体版本）的配置，设置 gtk-enable-animations 的值为 false。

  • 可以在 GTK 3 的配置文件中的 [Settings] 模块下设置 gtk-enable-animations = false。

• 在 Windows 10 中：设置 > 轻松获取 > 显示 > 在 Windows 中显示动画。

• 在 Windows 11 中：设置 > 辅助功能 > 视觉效果 > 动画效果。

• 在 MacOS 中：系统偏好 > 辅助使用 > 显示 > 减少运动。

• 在 iOS 上：设置 > 通用 > 辅助性 > 减少运动。

• 在 Android 9+ 上：设置 > 辅助性 > 移除动画。

示例

下面的例子将会展示一组令人心烦的动画，不过当你开启了系统的“减少运动”后就能看到动画减弱的效果了。

HTML

<div class="animation">animated box</div>

CSS

.animation {
  animation: vibrate 0.3s linear infinite both;
}

@media (prefers-reduced-motion: reduce) {
  .animation {
    animation: none;
  }
}

.animation {
  background-color: rebeccapurple;
  color: #fff;
  font:
    1.2em Helvetica,
    arial,
    sans-serif;
  width: 200px;
  padding: 1em;
  border-radius: 1em;
  text-align: center;
}

/* ----------------------------------------------
 * Generated by Animista on 2018-9-2 13:47:0
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation vibrate-1
 * ----------------------------------------
 */

@keyframes vibrate {
  0% {
    transform: translate(0);
  }
  20% {
    transform: translate(-2px, 2px);
  }
  40% {
    transform: translate(-2px, -2px);
  }
  60% {
    transform: translate(2px, 2px);
  }
  80% {
    transform: translate(2px, -2px);
  }
  100% {
    transform: translate(0);
  }
}

Result

规范

浏览器兼容性

参见

• Sec-CH-Prefers-Reduced-Motion HTTP 标头用户代理客户端提示
• 动画减弱媒体查询简介（CSS-Tricks，2019）
• 响应式动画设计（WebKit 博客，2017）