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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
|
---
title: animation-fill-mode
slug: Web/CSS/animation-fill-mode
tags:
- CSS
- CSS-анимации
- CSS-свойства
translation_of: Web/CSS/animation-fill-mode
---
<div>{{CSSRef}}{{SeeCompatTable}}</div>
<h2 id="Описание">Описание</h2>
<p><a href="/en/CSS" title="CSS">CSS</a> свойство <strong><code>animation-fill-mode</code></strong> определяет, как нужно применять стили к объекту анимации до и после её выполнения.</p>
<p>{{cssinfo}}</p>
<h2 id="Синтаксис">Синтаксис</h2>
<pre class="brush: css">animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;
/* Несколько значений могут быть заданы через запятую. */
/* Каждое значение соответствует для анимации в animation-name<code>.</code> */
animation-fill-mode: none, backwards;
animation-fill-mode: both, forwards, none;
</pre>
<h3 id="Значения">Значения</h3>
<dl>
<dt><code>none</code></dt>
<dd>Стили анимации не будут применены к элементу до и после её выполнения.</dd>
<dt><code>forwards</code></dt>
<dd>По окончании анимации элемент сохранит стили последнего ключевого кадра, который определяется значениями {{cssxref("animation-direction")}} и {{cssxref("animation-iteration-count")}}:
<table class="standard-table">
<thead>
<tr>
<th scope="col"><code>animation-direction</code></th>
<th scope="col"><code>animation-iteration-count</code></th>
<th scope="col">последний ключевой кадр</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>normal</code></td>
<td>любое</td>
<td><code>100%</code> или <code>to</code></td>
</tr>
<tr>
<td><code>reverse</code></td>
<td>любое</td>
<td><code>0%</code> или <code>from</code></td>
</tr>
<tr>
<td><code>alternate</code></td>
<td>чётное</td>
<td><code>0%</code> или <code>from</code></td>
</tr>
<tr>
<td><code>alternate</code></td>
<td>нечётное</td>
<td><code>100%</code> или <code>to</code></td>
</tr>
<tr>
<td><code>alternate-reverse</code></td>
<td>чётное</td>
<td><code>100%</code> или <code>to</code></td>
</tr>
<tr>
<td><code>alternate-reverse</code></td>
<td>нечётное</td>
<td><code>0%</code> или <code>from</code></td>
</tr>
</tbody>
</table>
</dd>
<dt><code>backwards</code></dt>
<dd>Элемент сохранит стиль первого <a href="/en-US/docs/CSS/@keyframes">ключевого кадра</a> на протяжении периода {{cssxref("animation-delay")}}. Первый ключевой кадр определяется значением {{cssxref("animation-direction")}}:
<table class="standard-table">
<thead>
<tr>
<th scope="col"><code>animation-direction</code></th>
<th scope="col">первый ключевой кадр</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>normal</code> или <code>alternate</code></td>
<td><code>0%</code> или <code>from</code></td>
</tr>
<tr>
<td><code>reverse</code> или <code>alternate-reverse</code></td>
<td><code>100%<font face="Open Sans, Arial, sans-serif"> или </font></code><code>to</code></td>
</tr>
</tbody>
</table>
</dd>
<dt><code>both</code></dt>
<dd>Анимация будет вести себя так, как будто значения forwards и backwards заданы одновременно.</dd>
</dl>
<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
{{csssyntax}}
<h2 id="Example">Пример</h2>
<p>Вы можете посмотреть эффект animation-fill-mode в следующем примере. По умолчанию, по окончании анимации стиль элемента возвращается к исходному. Значение forwards сохранит для элемента стиль последнего ключевого кадра.</p>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><p>Наведите курсор мыши на серый блок</p>
<div class="demo">
<div class="grows">Этот просто растёт</div>
<div class="growsandstays">Этот растёт и остаётся большим</div>
</div></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">.demo {
border-top: 100px solid #ccc;
height: 300px;
font-family: sans-serif;
}
@keyframes grow {
0% { font-size: 0 }
100% { font-size: 40px }
}
@-webkit-keyframes grow {
0% { font-size: 0 }
100% { font-size: 40px }
}
.demo:hover .grows {
animation-name: grow;
animation-duration: 3s;
-webkit-animation-name: grow;
-webkit-animation-duration: 3s;
}
.demo:hover .growsandstays {
animation-name: grow;
animation-duration: 3s;
animation-fill-mode: forwards;
-webkit-animation-name: grow;
-webkit-animation-duration: 3s;
-webkit-animation-fill-mode: forwards;
}</pre>
<p>{{EmbedLiveSample('Example',700,300)}}</p>
<h2 id="Specifications">Спецификации</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Спецификация</th>
<th scope="col">Статус</th>
<th scope="col">Комментарий</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Animations', '#animation-fill-mode', 'animation-fill-mode')}}</td>
<td>{{Spec2('CSS3 Animations')}}</td>
<td>Начальное определение</td>
</tr>
</tbody>
</table>
<h2 id="Browser_Compatibility">Совместимость с браузерами</h2>
<p>{{Compat("css.properties.animation-fill-mode")}}</p>
<h2 id="Смотрите_также">Смотрите также</h2>
<ul>
<li><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="Tutorial about CSS animations">Использование CSS-анимации</a></li>
<li>{{domxref("AnimationEvent", "AnimationEvent")}}</li>
</ul>
|
