prefers-reduced-motion

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

语法

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

用户偏好

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

  • 在  GTK/Gnome 中,可以通过 GNOME Tweaks (在“通用”或“外观”菜单中,取决于具体版本) 的配置,设置 gtk-enable-animations 的值为 false
  • 在 Windows 10 中:设置 > 轻松获取 > 显示 > 在 Windows 中显示动画。
  • 在 Windows 7 中:控制面板 > 轻松获取 > ?是计算机更易于查看 > 关闭不必要动画。
  • 在 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;
  }
}

Result

规范

Specification Status Comment
Media Queries Level 5
prefers-reduced-motion
Editor's Draft Initial definition.

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
prefers-reduced-motion media featureChrome Full support 74Edge Full support 79Firefox Full support 63IE No support NoOpera Full support 62Safari Full support 10.1WebView Android Full support 74Chrome Android Full support 74Firefox Android Full support 64Opera Android Full support 53Safari iOS Full support 10.3Samsung Internet Android Full support 11.0

Legend

Full support  
Full support
No support  
No support

参考