blob: 49de3de412eca7839646b63bbaa91b95dd7b971c (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
|
---
title: prefers-reduced-motion
slug: Web/CSS/@media/prefers-reduced-motion
translation_of: Web/CSS/@media/prefers-reduced-motion
---
<p><a href="https://developer.mozilla.org/en-US/docs/CSS">CSS</a> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">媒体查询特性</a> <strong><code>prefers-reduced-motion</code></strong> 用于检测用户的系统是否被开启了动画减弱功能。</p>
<h2 id="语法">语法</h2>
<dl>
<dt><code><dfn>no-preference</dfn></code></dt>
<dd>用户未修改系统动画相关特性。</dd>
<dt><code><dfn>reduce</dfn></code></dt>
<dd>这个值意味着用户修改了系统设置，将动画效果最小化，最好所有的不必要的移动都能被移除。</dd>
</dl>
<h2 id="用户偏好">用户偏好</h2>
<p>在火狐中，满足以下条件则 <code>reduce</code> 会生效:</p>
<ul>
<li>在 GTK/Gnome 中，可以通过 <em>GNOME Tweaks</em> （在“通用”或“外观”菜单中，取决于具体版本） 的配置，设置 <code>gtk-enable-animations</code> 的值为 <code>false</code>。
<ul>
<li>可以在 <a href="https://wiki.archlinux.org/index.php/GTK#Configuration">GTK 3 的配置文件</a>中的 <code>[Settings]</code> 模块下设置 <code>gtk-enable-animations = false</code>。</li>
</ul>
</li>
<li>在 Windows 10 中：设置 > 轻松获取 > 显示 > 在 Windows 中显示动画。</li>
<li>在 Windows 7 中：控制面板 > 轻松获取 > ?是计算机更易于查看 > 关闭不必要动画。</li>
<li>在 MacOS 中：系统偏好 > 辅助使用 > 显示 > 减少运动。</li>
<li>在 iOS 上：设置 > 通用 > 辅助性 > 减少运动。</li>
<li>在 Android 9+ 上：设置 > 辅助性 > 移除动画。</li>
</ul>
<h2 id="例子">例子</h2>
<p>下面的例子将会展示一组令人心烦的动画，不过当你开启了系统的“减少运动”后就能看到动画减弱的效果了。</p>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><div class="animation">animated box</div>
</pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">.animation {
animation: vibrate 0.3s linear infinite both;
}
@media (prefers-reduced-motion: reduce) {
.animation {
animation: none;
}
}
</pre>
<div class="hidden">
<pre class="brush: css">.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);
}
}
</pre>
</div>
<h3 id="Result">Result</h3>
<p>{{EmbedLiveSample("例子")}}</p>
<h2 id="规范">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS5 Media Queries', '#descdef-media-prefers-reduced-motion', 'prefers-reduced-motion')}}</td>
<td>{{Spec2('CSS5 Media Queries')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{Compat("css.at-rules.media.prefers-reduced-motion")}}</p>
<h2 id="参考">参考</h2>
<ul>
<li><a href="https://css-tricks.com/introduction-reduced-motion-media-query/">An introduction to the reduced motion media query</a></li>
</ul>
<div>{{QuickLinksWithSubpages("/en-US/docs/Web/CSS/@media/")}}</div>
|
