blob: 7def3d5d0f0f641150b8f81dd8bd7a9ca88673ab (
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
|
---
title: animation-play-state
slug: Web/CSS/animation-play-state
translation_of: Web/CSS/animation-play-state
---
<div>{{CSSRef}}{{SeeCompatTable}}</div>
<h2 id="概述">概述</h2>
<p><strong><code>animation-play-state</code></strong> <a href="/en-US/docs/CSS" title="CSS">CSS</a> 属性定义一个动画是否运行或者暂停。可以通过查询它来确定动画是否正在运行。另外，它的值可以被设置为暂停和恢复的动画的重放。</p>
<p>恢复一个已暂停的动画，将从它开始暂停的时候，而不是从动画序列的起点开始在动画。</p>
<p>{{cssinfo}}</p>
<h2 id="语法">语法</h2>
<pre class="brush: css notranslate">/* Single animation */
animation-play-state: running;
animation-play-state: paused;
/* Multiple animations */
animation-play-state: paused, running, running;
/* Global values */
animation-play-state: inherit;
animation-play-state: initial;
animation-play-state: unset;
</pre>
<h3 id="值">值</h3>
<dl>
<dt><code>running</code></dt>
<dd>当前动画正在运行。</dd>
<dt><code>paused</code></dt>
<dd>当前动画已被停止。</dd>
</dl>
<h3 id="正式语法">正式语法</h3>
<pre class="syntaxbox notranslate"><code>{{csssyntax}}</code>
</pre>
<h2 id="示例">示例</h2>
<p>参见实例<a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="CSS/CSS_animations">CSS animations</a> </p>
<h2 id="规范">规范</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-play-state', 'animation-play-state')}}</td>
<td>{{Spec2('CSS3 Animations')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</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>{{CompatVersionUnknown}}{{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>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="参见">参见</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>
|
