此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
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 2020年1月.
语法
no-preference-
用户未修改系统动画相关特性。
reduce-
这个值意味着用户修改了系统设置,将动画效果最小化,最好所有的不必要的移动都能被移除。
用户偏好
在火狐中,满足以下条件则 reduce 会生效:
-
在 GTK/Gnome 中,可以通过 GNOME Tweaks(在"通用"或"外观"菜单中,取决于具体版本)的配置,设置
gtk-enable-animations的值为false。- 可以在 GTK 3 的配置文件中的
[Settings]模块下设置gtk-enable-animations = false。
- 可以在 GTK 3 的配置文件中的
-
在 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;
}
}
.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
[フレーム]
规范
| Specification |
|---|
| Media Queries Level 5 # prefers-reduced-motion |
浏览器兼容性
Enable JavaScript to view this browser compatibility table.
参见
Sec-CH-Prefers-Reduced-MotionHTTP 标头用户代理客户端提示- 动画减弱媒体查询简介(CSS-Tricks,2019)
- 响应式动画设计(WebKit 博客,2017)