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
138
139
140
141
142
143
|
---
title: prefers-reduced-motion
slug: Web/CSS/@media/prefers-reduced-motion
tags:
- '@media'
- CSS
- Media Queries
- Reference
- media feature
translation_of: Web/CSS/@media/prefers-reduced-motion
---
<p><a href="https://developer.mozilla.org/ru/docs/Web/CSS">CSS</a> <a href="https://developer.mozilla.org/ru/docs/Web/CSS/Media_Queries/Using_media_queries">медиа функция</a> <code><strong>prefers-reduced-motion</strong></code> может использоваться для определения того, запросил ли пользователь, чтобы ОС минимизировала количество анимации или движения, которые она использует.</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>В этом примере присутствует раздражающая анимация, если вы не включите «Уменьшить движение» в настройках доступности.</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 {
-webkit-animation: vibrate 0.3s linear infinite both;
animation: vibrate 0.3s linear infinite both;
}
@media (prefers-reduced-motion: reduce) {
.animation {
animation: none;
-webkit-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
* ----------------------------------------
*/
@-webkit-keyframes vibrate {
0% {
-webkit-transform: translate(0);
transform: translate(0);
}
20% {
-webkit-transform: translate(-2px, 2px);
transform: translate(-2px, 2px);
}
40% {
-webkit-transform: translate(-2px, -2px);
transform: translate(-2px, -2px);
}
60% {
-webkit-transform: translate(2px, 2px);
transform: translate(2px, 2px);
}
80% {
-webkit-transform: translate(2px, -2px);
transform: translate(2px, -2px);
}
100% {
-webkit-transform: translate(0);
transform: translate(0);
}
}
@keyframes vibrate {
0% {
-webkit-transform: translate(0);
transform: translate(0);
}
20% {
-webkit-transform: translate(-2px, 2px);
transform: translate(-2px, 2px);
}
40% {
-webkit-transform: translate(-2px, -2px);
transform: translate(-2px, -2px);
}
60% {
-webkit-transform: translate(2px, 2px);
transform: translate(2px, 2px);
}
80% {
-webkit-transform: translate(2px, -2px);
transform: translate(2px, -2px);
}
100% {
-webkit-transform: translate(0);
transform: translate(0);
}
}
</pre>
</div>
<h3 id="Результат">Результат</h3>
<p>{{EmbedLiveSample("Примеры")}}</p>
<h2 id="Спецификация">Спецификация</h2>
{{Specifications}}
<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
<p>{{Compat}}</p>
<h2 id="See_also"><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/reduceRight#See_also">Смотрите также</a></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>
|
