blob: 9039dcfedbbcc4b79bf578d38d201b7b98a62471 (
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
|
---
title: animation-iteration-count
slug: Web/CSS/animation-iteration-count
tags:
- CSS
- CSS Animations
- CSS Property
- Experimental
- Reference
translation_of: Web/CSS/animation-iteration-count
---
<div>{{ CSSRef() }}</div>
<div>{{ SeeCompatTable() }}</div>
<h2 id="Обзор">Обзор</h2>
<p><a href="/ru/CSS" title="CSS">CSS</a><code><font face="Open Sans, Arial, sans-serif"> свойство </font><strong>animation-iteration-count</strong></code> определяет сколько раз будет проигрываться анимационный цикл, перед тем как остановиться.</p>
<p>Наиболее удобно использовать это свойство в сокращённом варианте {{ cssxref("animation") }}, в котором указываются все анимационные свойства.</p>
<p>{{cssinfo}}</p>
<h2 id="Синтаксис">Синтаксис</h2>
<pre class="brush:css">animation-iteration-count: infinite;
animation-iteration-count: 3;
animation-iteration-count: 2.3;
animation-iteration-count: 2, 0, infinite;
</pre>
<h3 id="Значения">Значения</h3>
<dl>
<dt><code>infinite</code></dt>
<dd>Анимация повторяется бесконечно.</dd>
<dt><code><number></code></dt>
<dd>Сколько раз анимация будет повторяться; по умолчанию 1. Отрицательные значения не используются. Можно использовать не целые значения, для проигрывания части анимационного цикла (например, 0.5 воспроизведёт половину анимационного цикла).</dd>
</dl>
<h3 id="Правила_синтаксиса">Правила синтаксиса</h3>
{{csssyntax}}
<h2 id="Примеры">Примеры</h2>
<p>Смотрите примеры <a href="/ru/docs/Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy">CSS анимации</a>.</p>
<h2 id="Specifications" name="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-iteration-count', 'animation-iteration-count') }}</td>
<td>{{ Spec2('CSS3 Animations') }}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Browser_Compatibility" name="Browser_Compatibility">Совместимость с браузерами</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Возможность</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Базовая поддержка</td>
<td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}<br>
{{CompatChrome(43.0)}}</td>
<td>{{ CompatGeckoDesktop("5.0") }}{{ property_prefix("-moz") }}<br>
{{ CompatGeckoDesktop("16.0") }}</td>
<td>10 </td>
<td>12 {{ property_prefix("-o") }}<br>
12.10</td>
<td>4.0{{ property_prefix("-webkit") }}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Возможность</th>
<th>Android</th>
<th>Chrome</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
<th>Chrome for Android</th>
</tr>
<tr>
<td>Базовая поддержка</td>
<td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td>
<td>{{CompatUnknown}}</td>
<td>{{ CompatGeckoMobile("5.0") }}{{ property_prefix("-moz") }}<br>
{{ CompatGeckoMobile("16.0") }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{CompatChrome(43.0)}}<br>
</td>
</tr>
</tbody>
</table>
</div>
<h2 id="Также_смотрите">Также смотрите</h2>
<ul>
<li><a href="/ru/docs/Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy" title="Обучение CSS анимациям">Использование CSS анимацией</a></li>
<li>{{ domxref("AnimationEvent", "AnimationEvent") }}</li>
</ul>
|
