prefers-reduced-motion

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

CSS 媒体特性 prefers-reduced-motion 用于检测用户的系统是否被开启了动画减弱功能。

语法

no-preference

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

reduce

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

用户偏好

在火狐中,满足以下条件则 reduce 会生效:

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

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

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

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

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

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

示例

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

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;
  }
}

Result

规范

Specification
Media Queries Level 5
# prefers-reduced-motion

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
prefers-reduced-motion media feature

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参考