blob: f6e415d3efa5d1ebc35c70d49c380a64902d0008 (
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
137
138
139
140
141
142
143
144
145
146
|
---
title: '@keyframes'
slug: Web/CSS/@keyframes
tags:
- CSS
- 动画
- 参考
translation_of: Web/CSS/@keyframes
---
<div>{{CSSRef}}</div>
<p><span class="seoSummary">关键帧 <strong><code>@keyframes</code></strong> <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/At-rule">at-rule</a> 规则通过在动画序列中定义关键帧（或waypoints）的样式来控制CSS动画序列中的中间步骤。</span>和 <a href="/zh-CN/docs/Web/CSS/CSS_Transitions">转换 transition</a> 相比，关键帧 keyframes 可以控制动画序列的中间步骤。</p>
<pre class="brush: css no-line-numbers notranslate"><code>@keyframes slidein {
from {
</code>transform: translateX(0%); <code>
}
to {
</code>transform: translateX(100%);<code>
}
}</code></pre>
<p>JavaScript 可以通过 CSS对象模型的 {{domxref("CSSKeyframesRule")}} 接口来访问 <code>@keyframes</code>。</p>
<p>要使用关键帧, 先创建一个带名称的 <code>@keyframes</code> 规则，以便后续使用 {{ cssxref("animation-name") }} 属性将动画同其关键帧声明匹配。每个 <code>@keyframes</code> 规则包含多个关键帧，也就是一段样式块语句，每个关键帧有一个百分比值作为名称，代表在动画进行中，在哪个阶段触发这个帧所包含的样式。</p>
<p>可以按任意顺序列出关键帧百分比；它们将按照其应该发生的顺序来处理。</p>
<h3 id="让关键帧序列生效">让关键帧序列生效</h3>
<p>如果一个关键帧规则没有指定动画的开始或结束状态（也就是，<code>0%</code>/<code>from</code> 和<code>100%</code>/<code>to</code>，浏览器将使用元素的现有样式作为起始/结束状态。这可以用来从初始状态开始元素动画，最终返回初始状态。</p>
<p>如果在关键帧的样式中使用了不能用作动画的属性，那么这些属性会被忽略掉，支持动画的属性仍然是有效的，不受波及。</p>
<h3 id="重复定义">重复定义</h3>
<p>如果多个关键帧使用同一个名称，以最后一次定义的为准。 <code>@keyframes</code> 不存在层叠样式(cascade)的情况，所以动画在一个时刻（阶段）只会使用一个的关键帧的数据。</p>
<p>如果一个@keyframes 内的关键帧的百分比存在重复的情况，则@keyframes规则中该百分比的所有关键帧都将用于该帧。如果多个关键帧指定了相同的百分比值，则@keyframes规则内是可以使用层叠样式的。</p>
<h3 id="属性个数不定">属性个数不定</h3>
<p>如果一个关键帧中没有出现其他关键帧中的属性，那么这个属性将使用插值（不能使用插值的属性除外，这些属性会被忽略掉）。例如：</p>
<pre class="brush: css notranslate">@keyframes identifier {
0% { top: 0; left: 0; }
30% { top: 50px; }
68%, 72% { left: 50px; }
100% { top: 100px; left: 100%; }
}
</pre>
<p>例子中，{{ cssxref("top") }} 属性分别出现在关键帧 <code>0%</code>、<code>30%</code> 和 <code>100%</code> 的中，而 {{ cssxref("left") }} 属性分别出现在关键帧 <code>0%</code>、<code>68%</code>、<code>72%</code> 和 <code>100%</code> 中。</p>
<h3 id="同一关键帧中的相同属性被重复定义">同一关键帧中的相同属性被重复定义</h3>
<p>如果某一个关键帧出现了重复的定义，且重复的关键帧中的 CSS 属性值不同，则以最后一次定义的属性为准。例如：</p>
<pre class="brush: css notranslate">@keyframes identifier {
0% { top: 0; }
50% { top: 30px; left: 20px; }
50% { top: 10px; }
100% { top: 0; }
}
</pre>
<p>上面这个例子中，<code>50%</code> 关键帧中分别最后设置的属性 <code>top: 10px</code> 和 <code>left: 20px</code> 是有效的，但是其他的属性会被忽略。</p>
<p>Firefox 14 开始支持层叠 keyframes。</p>
<h3 id="关键帧中的_!important">关键帧中的 <code>!important</code></h3>
<p>关键帧中出现的 <code>!important</code> 将会被忽略。</p>
<pre class="brush: css notranslate">@keyframes important1 {
from { margin-top: 50px; }
50% { margin-top: 150px !important; } /* 忽略 */
to { margin-top: 100px; }
}
@keyframes important2 {
from { margin-top: 50px;
margin-bottom: 100px; }
to { margin-top: 150px !important; /* 忽略 */
margin-bottom: 50px; }
}
</pre>
<h2 id="语法">语法</h2>
<h3 id="取值">取值</h3>
<dl>
<dt>{{cssxref("custom-ident")}}</dt>
<dd>帧列表的名称。名称必须符合 CSS 语法中对标识符的定义。</dd>
<dt><code>from</code></dt>
<dd>等价于 <code>0%</code>。</dd>
<dt><code>to</code></dt>
<dd>等价于 <code>100%</code>。</dd>
<dt>{{cssxref("<percentage>")}}</dt>
<dd>动画序列中触发关键帧的时间点，使用百分值来表示。</dd>
<dt>
<h3 id="形式化语法">形式化语法</h3>
{{csssyntax}}
</dt>
</dl>
<h2 id="示例">示例</h2>
<p>参见<a href="/zh-CN/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="en/CSS/CSS_animations">使用 CSS 动画</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', '#keyframes', '@keyframes') }}</td>
<td>{{ Spec2('CSS3 Animations') }}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Browser_Compatibility" name="Browser_Compatibility">浏览器兼容性</h2>
<div class="hidden">
<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
</div>
<p>{{Compat("css.at-rules.keyframes")}}</p>
<h2 id="参见">参见</h2>
<ul>
<li><a href="/zh-CN/docs/Web/CSS/CSS_Animations/Using_CSS_animations">使用 CSS 动画</a></li>
<li>{{ domxref("AnimationEvent") }}</li>
</ul>
|
