initial commit

1 files changed, 189 insertions, 0 deletions

diff --git a/files/zh-cn/web/css/animation-fill-mode/index.html b/files/zh-cn/web/css/animation-fill-mode/index.html
new file mode 100644
index 0000000000..03a4fa5963
--- /dev/null
+++ b/files/zh-cn/web/css/animation-fill-mode/index.html
@@ -0,0 +1,189 @@
+---
+title: animation-fill-mode
+slug: Web/CSS/animation-fill-mode
+tags:
+  - CSS
+  - CSS Animations
+  - CSS Property
+  - Experimental
+  - Reference
+translation_of: Web/CSS/animation-fill-mode
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/en/CSS">CSS</a> 属性 <strong><code>animation-fill-mode</code></strong> <span class="tlid-translation translation" lang="zh-CN"><span title="">设置CSS动画在执行之前和之后如何将样式应用于其目标。</span></span></p>
+
+<div>{{EmbedInteractiveExample("pages/css/animation-fill-mode.html")}}</div>
+
+
+
+<p>使用简写属性 {{cssxref("animation")}} 一次性设置所有动画属性通常很方便。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="brush: css no-line-numbers">/* Single animation */
+animation-fill-mode: none;
+animation-fill-mode: forwards;
+animation-fill-mode: backwards;
+animation-fill-mode: both;
+
+/* Multiple animations */
+animation-fill-mode: none, backwards;
+animation-fill-mode: both, forwards, none;
+</pre>
+
+<h3 id="值">值</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>当动画未执行时，动画将不会将任何样式应用于目标，而是已经赋予给该元素的 CSS 规则来显示该元素。这是默认值。</dd>
+ <dt><code>forwards</code></dt>
+ <dd>目标将保留由执行期间遇到的最后一个<a href="/en-US/docs/CSS/@keyframes">关键帧</a>计算值。 最后一个关键帧取决于{{cssxref("animation-direction")}}和{{cssxref("animation-iteration-count")}}的值：
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col"><code>animation-direction</code></th>
+    <th scope="col"><code>animation-iteration-count</code></th>
+    <th scope="col">last keyframe encountered</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>normal</code></td>
+    <td>even or odd</td>
+    <td><code>100%</code> or <code>to</code></td>
+   </tr>
+   <tr>
+    <td><code>reverse</code></td>
+    <td>even or odd</td>
+    <td><code>0%</code> or <code>from</code></td>
+   </tr>
+   <tr>
+    <td><code>alternate</code></td>
+    <td>even</td>
+    <td><code>0%</code> or <code>from</code></td>
+   </tr>
+   <tr>
+    <td><code>alternate</code></td>
+    <td>odd</td>
+    <td><code>100%</code> or <code>to</code></td>
+   </tr>
+   <tr>
+    <td><code>alternate-reverse</code></td>
+    <td>even</td>
+    <td><code>100%</code> or <code>to</code></td>
+   </tr>
+   <tr>
+    <td><code>alternate-reverse</code></td>
+    <td>odd</td>
+    <td><code>0%</code> or <code>from</code></td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt><code>backwards</code></dt>
+ <dd>动画将在应用于目标时立即应用第一个关键帧中定义的值，并在{{cssxref("animation-delay")}}期间保留此值。 第一个关键帧取决于{{cssxref("animation-direction")}}的值：
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col"><code>animation-direction</code></th>
+    <th scope="col">first relevant keyframe</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>normal</code> or <code>alternate</code></td>
+    <td><code>0%</code> or <code>from</code></td>
+   </tr>
+   <tr>
+    <td><code>reverse</code> or <code>alternate-reverse</code></td>
+    <td><code>100%</code> or <code>to</code></td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt><code>both</code></dt>
+ <dd>动画将遵循<code>forwards</code>和<code>backwards</code>的规则，从而在两个方向上扩展动画属性。</dd>
+</dl>
+
+<div class="note">
+<p><strong>注意</strong>：当您在<code>animation-*</code>属性上指定多个以逗号分隔的值时，它们将根据值的数量以不同的方式分配给 {{cssxref("animation-name")}} 属性中指定的动画。 有关更多信息，请参阅<a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations#Setting_multiple_animation_property_values">设置多个动画属性值</a>。</p>
+</div>
+
+<h3 id="正式语法">正式语法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Example" name="Example">示例</h2>
+
+<p>您可以在以下示例中看到 <code>animation-fill-mode</code> 的效果。 它演示了如何对于运行无限时间的动画，可以使其保持最终状态而不是恢复到原始状态（这是默认状态）。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Move your mouse over the gray box!&lt;/p&gt;
+&lt;div class="demo"&gt;
+ &lt;div class="growsandstays"&gt;This grows and stays big.&lt;/div&gt;
+  &lt;div class="grows"&gt;This just grows.&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.demo {
+  border-top: 100px solid #ccc;
+  height: 300px;
+}
+
+@keyframes grow {
+  0% { font-size: 0; }
+  100% { font-size: 40px; }
+}
+
+.demo:hover .grows {
+  animation-name: grow;
+  animation-duration: 3s;
+}
+
+.demo:hover .growsandstays {
+  animation-name: grow;
+  animation-duration: 3s;
+  animation-fill-mode: forwards;
+}</pre>
+
+<p>{{EmbedLiveSample('Example',700,300)}}</p>
+
+<p>更多示例请查看 <a href="/en/CSS/CSS_animations" title="en/CSS/CSS_animations">CSS 动画</a> 。</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-fill-mode', 'animation-fill-mode')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("css.properties.animation-fill-mode")}}</p>
+
+<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>JavaScript {{domxref("AnimationEvent")}} API</li>
+</ul>