initial commit

1 files changed, 146 insertions, 0 deletions

diff --git a/files/zh-cn/web/css/@keyframes/index.html b/files/zh-cn/web/css/@keyframes/index.html
new file mode 100644
index 0000000000..369504b8e3
--- /dev/null
+++ b/files/zh-cn/web/css/@keyframes/index.html
@@ -0,0 +1,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>{{ fx_minversion_inline("14") }}  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("&lt;percentage&gt;")}}</dt>
+ <dd>动画序列中触发关键帧的时间点，使用百分值来表示。</dd>
+ <dt>
+ <h3 id="形式化语法">形式化语法</h3>
+
+ <pre class="notranslate">{{csssyntax}}</pre>
+ </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>