path: root/files/zh-cn/web/css/animation-fill-mode/index.html

---
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>