blob: 283caae60b2c5d8720dd99884cc20cb2f1a8c9d3 (
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
|
---
title: animation-iteration-count
slug: Web/CSS/animation-iteration-count
translation_of: Web/CSS/animation-iteration-count
---
<div>{{CSSRef}} {{ SeeCompatTable() }}</div>
<h2 id="Summary_概要">Summary 概要</h2>
<p><strong><code>animation-iteration-count</code></strong> <a href="/en/CSS" title="CSS">CSS</a> 属性 定义动画在结束前运行的次数 可以是1次 无限循环.</p>
<p>如果指定了多个值，每次播放动画时，将使用列表中的下一个值，在使用最后一个值后循环回第一个值。</p>
<p>通常情况下，使用<code>animation</code>简写属性，来一次性设置所有动画属性会更方便。</p>
<div>{{EmbedInteractiveExample("pages/css/animation-iteration-count.html")}}</div>
<h2 id="Syntax_语法">Syntax 语法</h2>
<pre class="brush:css">/* 值为关键字 */
animation-iteration-count: infinite;
/* 值为数字 */
animation-iteration-count: 3;
animation-iteration-count: 2.4;
/* 指定多个值 */
animation-iteration-count: 2, 0, infinite;
</pre>
<p><code>animation-iteration-count</code> 属性可以指定一个或多个以逗号分隔的值。</p>
<h3 id="Values_属性值">Values 属性值</h3>
<dl>
<dt><code>infinite</code></dt>
<dd>无限循环播放动画.</dd>
<dt><code><number></code></dt>
<dd>动画播放的次数；默认值为<code>1</code>。可以用小数定义循环，来播放动画周期的一部分：例如，<code>0.5</code> 将播放到动画周期的一半。不可为负值。</dd>
</dl>
<h3 id="Formal_syntax">Formal syntax </h3>
{{csssyntax}}
<h2 id="Examples_示例">Examples 示例</h2>
<p>去看 <a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations">CSS animations</a> for examples. 点击链接去看栗（例）子</p>
<h2 id="Specifications" name="Specifications">Specifications 说明 用法</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('CSS3 Animations', '#animation-iteration-count', 'animation-iteration-count') }}</td>
<td>{{ Spec2('CSS3 Animations') }}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility 兼容性</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Basic support</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>Feature</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>Basic support</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="See_also">See also</h2>
<ul>
<li><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="Tutorial about CSS animations">Using CSS animations</a></li>
<li>{{ domxref("AnimationEvent", "AnimationEvent") }}</li>
</ul>
|
