blob: 38b64a701e9b6da68c6047cba7d7a38a749f3358 (
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
136
|
---
title: animation-name
slug: Web/CSS/animation-name
tags:
- CSS
- CSS Animations
- CSS Property
- Experimental
- Reference
translation_of: Web/CSS/animation-name
---
<div>{{CSSRef}}</div>
<div><code>animation-name</code>属性指定应用的一系列动画，每个名称代表一个由{{cssxref("@keyframes")}}定义的动画序列。</div>
<pre class="brush: css"><code>/* Single animation */
animation-name: none;
animation-name: test_05;
animation-name: -specific;
animation-name: sliding-vertically;</code>
/* Multiple animations */
animation-name: test1, animation4;
animation-name: none, -moz-specific, sliding;
/* Global values */
animation-name: initial
animation-name: inherit
animation-name: unset</pre>
<p>使用简写属性{{cssxref("animation")}}可以很方便地同时设置所有的动画属性。</p>
<p>{{cssinfo}}</p>
<h2 id="语法">语法</h2>
<h3 id="值">值</h3>
<dl>
<dt><code>none</code></dt>
<dd>特殊关键字，表示无关键帧。可以不改变其他标识符的顺序而使动画失效，或者使层叠的动画样式失效。</dd>
<dt><code>IDENT</code></dt>
<dd>标识动画的字符串，由大小写敏感的字母a-z、数字0-9、下划线(_)和/或横线(-)组成。第一个非横线字符必须是字母，数字不能在字母前面，不允许两个横线出现在开始位置。</dd>
<dt>
<h3 id="Formal_syntax">Formal syntax</h3>
{{csssyntax("animation-name")}}
</dt>
</dl>
<h2 id="示例">示例</h2>
<p>See <a href="/en-US/docs/CSS/CSS_animations" title="CSS/CSS_animations">CSS animations</a> for examples.</p>
<h2 id="Specifications" name="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-name', 'animation-name')}}</td>
<td>{{Spec2('CSS3 Animations')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容</h2>
<div>{{CompatibilityTable}}</div>
<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")}}</td>
<td>{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}<br>
{{CompatGeckoDesktop("16.0")}}</td>
<td>10 </td>
<td>12 {{property_prefix("-o")}}<br>
12.10 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></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>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
<td>{{CompatGeckoMobile("5.0")}}{{property_prefix("-moz")}}<br>
{{CompatGeckoMobile("16.0")}}</td>
<td>10</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="See_also">See also</h2>
<ul>
<li><a href="/en-US/docs/CSS/Tutorials/Using_CSS_animations" title="Tutorial about CSS animations">Using CSS animations</a></li>
<li>{{domxref("AnimationEvent", "AnimationEvent")}}</li>
</ul>
|
