CSS 属性 animation-fill-mode 设置 CSS 动画在执行之前和之后如何将样式应用于其目标。

{{InteractiveExample("CSS Demo: animation-fill-mode")}}

```css interactive-example-choice animation-fill-mode: none; animation-delay: 1s;


```css interactive-example-choice
animation-fill-mode: forwards;
animation-delay: 1s;

```css interactive-example-choice animation-fill-mode: backwards; animation-delay: 1s;


```css interactive-example-choice
animation-fill-mode: both;
animation-delay: 1s;

```html interactive-example

Animation
Select a mode to start!


```css interactive-example
#example-element {
  background-color: #1766aa;
  color: white;
  margin: auto;
  margin-left: 0;
  border: 5px solid #333;
  width: 150px;
  height: 150px;
  border-radius: 50%;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#playstatus {
  font-weight: bold;
}

.animating {
  animation: slide 1s ease-in 1;
}

@keyframes slide {
  from {
    background-color: orange;
    color: black;
    margin-left: 0;
  }
  to {
    background-color: orange;
    color: black;
    margin-left: 80%;
  }
}

```js interactive-example "use strict";

window.addEventListener("load", () => { const el = document.getElementById("example-element"); const status = document.getElementById("playstatus");

function update() { status.textContent = "delaying"; el.className = ""; window.requestAnimationFrame(() => { window.requestAnimationFrame(() => { el.className = "animating"; }); }); }

el.addEventListener("animationstart", () => { status.textContent = "playing"; });

el.addEventListener("animationend", () => { status.textContent = "finished"; });

const observer = new MutationObserver(() => { update(); });

observer.observe(el, { attributes: true, attributeFilter: ["style"], });

update(); });


使用简写属性 {{cssxref("animation")}} 一次性设置所有动画属性通常很方便。

## 语法

```css
/* 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;

值

  • none
    • : 当动画未执行时，动画将不会将任何样式应用于目标，而是已经赋予给该元素的 CSS 规则来显示该元素。这是默认值。

  • forwards

    • : 目标将保留由执行期间遇到的最后一个关键帧计算值。最后一个关键帧取决于{{cssxref("animation-direction")}}和{{cssxref("animation-iteration-count")}}的值：
    animation-direction animation-iteration-count last keyframe encountered
    normal even or odd 100% or to
    reverse even or odd 0% or from
    alternate even 0% or from
    alternate odd 100% or to
    alternate-reverse even 100% or to
    alternate-reverse odd 0% or from

  • backwards

    • : 动画将在应用于目标时立即应用第一个关键帧中定义的值，并在{{cssxref("animation-delay")}}期间保留此值。第一个关键帧取决于{{cssxref("animation-direction")}}的值：
    animation-direction first relevant keyframe
    normal or alternate 0% or from
    reverse or alternate-reverse 100% or to

  • both

    • : 动画将遵循forwards和backwards的规则，从而在两个方向上扩展动画属性。

[!NOTE] 当你在animation-*属性上指定多个以逗号分隔的值时，它们将根据值的数量以不同的方式分配给 {{cssxref("animation-name")}} 属性中指定的动画。有关更多信息，请参阅设置多个动画属性值。

正式语法

{{csssyntax}}

示例

你可以在以下示例中看到 animation-fill-mode 的效果。它演示了如何对于运行无限时间的动画，可以使其保持最终状态而不是恢复到原始状态（这是默认状态）。

HTML

<p>Move your mouse over the gray box!</p>
<div class="demo">
  <div class="growsandstays">This grows and stays big.</div>
  <div class="grows">This just grows.</div>
</div>

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

{{EmbedLiveSample('示例',700,300)}}

更多示例请查看 CSS 动画 。