View in EnglishAlways switch to English

animation-fill-mode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年9月.

animation-fill-modeCSS 屬性用於設定 CSS 動畫在執行前後，如何將樣式應用至其目標。

嘗試一下

animation-fill-mode: none;animation-delay: 1s;

animation-fill-mode: forwards;animation-delay: 1s;

animation-fill-mode: backwards;animation-delay: 1s;

animation-fill-mode: both;animation-delay: 1s;

<section>  <div>動畫<span></span></div>  <div>選擇一個模式以開始！</div></section>

#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;}#play-status {  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%;  }}

"use strict";window.addEventListener("load", () => {  const el = document.getElementById("example-element");  const status = document.getElementById("play-status");  function update() {    status.textContent = "延遲中";    el.className = "";    window.requestAnimationFrame(() => {      window.requestAnimationFrame(() => {        el.className = "animating";      });    });  }  el.addEventListener("animationstart", () => {    status.textContent = "播放中";  });  el.addEventListener("animationend", () => {    status.textContent = "已結束";  });  const observer = new MutationObserver(() => {    update();  });  observer.observe(el, {    attributes: true,    attributeFilter: ["style"],  });  update();});

通常使用簡寫屬性animation 來一次設定所有動畫屬性會很方便。

語法

css

/* 單一動畫 */animation-fill-mode: none;animation-fill-mode: forwards;animation-fill-mode: backwards;animation-fill-mode: both;/* 多個動畫 */animation-fill-mode: none, backwards;animation-fill-mode: both, forwards, none;/* 全域值 */animation-fill-mode: inherit;animation-fill-mode: initial;animation-fill-mode: revert;animation-fill-mode: revert-layer;animation-fill-mode: unset;

值

none

動畫在未執行時，不會對目標應用任何樣式。元素將改為使用任何其他應用於其上的 CSS 規則來顯示。這是預設值。

forwards

目標將保留執行期間遇到的最後一個關鍵格所設定的計算值。最後一個關鍵格取決於animation-direction 和animation-iteration-count 的值：

`animation-direction`	`animation-iteration-count`	遇到的最後一個關鍵格
`normal`	偶數或奇數	`100%` 或`to`
`reverse`	偶數或奇數	`0%` 或`from`
`alternate`	偶數	`0%` 或`from`
`alternate`	奇數	`100%` 或`to`
`alternate-reverse`	偶數	`100%` 或`to`
`alternate-reverse`	奇數	`0%` 或`from`

動畫屬性的行為就像被包含在一個設定好的will-change 屬性值中。如果在動畫期間建立了新的堆疊上下文，目標元素在動畫結束後會保留該堆疊上下文。

backwards

動畫一旦應用到目標上，就會立即套用第一個相關關鍵格中定義的值，並在animation-delay 期間保留此狀態。第一個相關的關鍵格取決於animation-direction 的值：

`animation-direction`	第一個相關的關鍵格
`normal` 或`alternate`	`0%` 或`from`
`reverse` 或`alternate-reverse`	`100%` 或`to`

both

動畫將同時遵循forwards 和backwards 的規則，從而將動畫屬性在兩個方向上延伸。

備註：當你在一個animation-* 屬性上指定多個以逗號分隔的值時，它們會按照animation-name 出現的順序應用於動畫。關於動畫數量與animation-* 屬性值數量不匹配的情況，請參見設定多個動畫屬性值。

備註：在建立CSS 滾動驅動動畫時，animation-fill-mode 的效果與常規的基於時間的動畫相同。

形式定義

預設值	`none`
適用於	所有元素，`::before` 和`::after`偽元素
繼承與否	否
Computed value	as specified
動畫類型	不可動

形式語法

animation-fill-mode =
<single-animation-fill-mode>#

<single-animation-fill-mode> =
none|
forwards|
backwards|
both

範例

設定填充模式

你可以在下面的範例中看到animation-fill-mode 的效果。它展示了如何讓動畫保持在最終狀態，而不是恢復到原始狀態（這是預設行為）。

HTML

html

<p>將你的滑鼠移到灰色方塊上！</p><div>  <div>這個會變大並保持大小。</div>  <div>這個只會變大。</div></div>

CSS

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 .grows-and-stays {  animation-name: grow;  animation-duration: 3s;  animation-fill-mode: forwards;}