mdn · Dr-XYZ · Jul 6, 2025 · Jul 6, 2025 · Jul 6, 2025 · Jul 6, 2025
@@ -1,83 +1,203 @@
 ---
 title: animation-fill-mode
 slug: Web/CSS/animation-fill-mode
+l10n:
+  sourceCommit: a84b606ffd77c40a7306be6c932a74ab9ce6ab96
 ---
 
 {{CSSRef}}
 
-**`animation-fill-mode`** [CSS](/zh-TW/docs/Web/CSS) 属性指定 CSS 动画应该如何在其执行前后的样式展示情况。
+**`animation-fill-mode`** [CSS](/zh-TW/docs/Web/CSS) 屬性用於設定 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
+<section class="flex-column" id="default-example">
+  <div>動畫 <span id="play-status"></span></div>
+  <div id="example-element">選擇一個模式以開始！</div>
+</section>
+```
+
+```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;
+}
+
+#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%;
+  }
+}
+```
+
+```js interactive-example
+"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();
+});
+```
+
+通常使用簡寫屬性 {{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;
-```
-
-使用提示 `animation` 来一次设置所有动画属性通常很方便。
 
-## 语法
+/* 全域值 */
+animation-fill-mode: inherit;
+animation-fill-mode: initial;
+animation-fill-mode: revert;
+animation-fill-mode: revert-layer;
+animation-fill-mode: unset;
+```
 
-### 属性值
+### 值
 
 - `none`
-  - : 不执行动画时，动画不会应用任何样式。该元素会使用其 **`keyframes`** 关键动画帧规则来显示动画。这是默认值。
+  - : 動畫在未執行時，不會對目標應用任何樣式。元素將改為使用任何其他應用於其上的 CSS 規則來顯示。這是預設值。
 - `forwards`
-  - : 动画执行后停留到最后一个关键帧动画的计算值，简单来说执行结束动画会停留到结束时候的状态，不会是动画执行之前的效果。比如一个元素从左往右运动，添加当前属性值 **`forwards`** 元素会停留到动画执行结束后的右边而不是最初的左边。
+  - : 目標將保留執行期間遇到的最後一個 [keyframe](/zh-TW/docs/Web/CSS/@keyframes) 所設定的計算值。最後一個 keyframe 取決於 {{cssxref("animation-direction")}} 和 {{cssxref("animation-iteration-count")}} 的值：
 
-    当然最后动画停留显示的关键帧会取决于 `"animation-direction"` 和 `"animation-iteration-count"` 这两个属性 运行方向和运行次数:
+    | `animation-direction` | `animation-iteration-count` | 遇到的最後一個 keyframe |
+    | --------------------- | --------------------------- | ----------------------- |
+    | `normal`              | 偶數或奇數                  | `100%` 或 `to`          |
+    | `reverse`             | 偶數或奇數                  | `0%` 或 `from`          |
+    | `alternate`           | 偶數                        | `0%` 或 `from`          |
+    | `alternate`           | 奇數                        | `100%` 或 `to`          |
+    | `alternate-reverse`   | 偶數                        | `100%` 或 `to`          |
+    | `alternate-reverse`   | 奇數                        | `0%` 或 `from`          |
 
-    | `animation-direction` | `animation-iteration-count` | last keyframe encountered |
-    | --------------------- | --------------------------- | ------------------------- |
-    | `normal`              | 偶数或奇数值                | `100%` 或 `to`            |
-    | `reverse`             | 偶数或奇数值                | `0%` 或 `from`            |
-    | `alternate`           | 偶数值                      | `0%` 或 `from`            |
-    | `alternate`           | 奇数值                      | `100%` 或 `to`            |
-    | `alternate-reverse`   | 偶数值                      | `100%` 或 `to`            |
-    | `alternate-reverse`   | 奇数值                      | `0%` 或 `from`            |
+    動畫屬性的行為就像被包含在一個設定好的 [`will-change`](/zh-TW/docs/Web/CSS/will-change) 屬性值中。如果在動畫期間建立了新的堆疊上下文，目標元素在動畫結束後會保留該堆疊上下文。
 
 - `backwards`
-  - : 与上面 **`forwards`** 值效果相反，动画执行后停留到第一个关键帧动画，准确说是没有执行动画之前的初始状态。
+  - : 動畫一旦應用到目標上，就會立即套用第一個相關 [keyframe](/zh-TW/docs/Web/CSS/@keyframes) 中定義的值，並在 {{cssxref("animation-delay")}} 期間保留此狀態。第一個相關的 keyframe 取決於 {{cssxref("animation-direction")}} 的值：
 
-    【（the animation will apply the values defined in the first relevant [keyframe](/zh-TW/docs/Web/CSS/@keyframes) as soon as it is applied to the target, and retain this during the `"animation-delay"` period.）原文大概意思是会停留第一个关键帧，并会保留 `"animation-delay"` 延迟属性的所设定周期。】
+    | `animation-direction`            | 第一個相關的 keyframe |
+    | -------------------------------- | --------------------- |
+    | `normal` 或 `alternate`          | `0%` 或 `from`        |
+    | `reverse` 或 `alternate-reverse` | `100%` 或 `to`        |
 
-    会在延迟之后才开始执行关键帧动画，而不是一开始使用第一帧进行停留，具体可以结合 **`both`** 的例子进行尝试。
+- `both`
+  - : 動畫將同時遵循 `forwards` 和 `backwards` 的規則，從而將動畫屬性在兩個方向上延伸。
 
-    第一个相关关键帧会取决于 `"animation-direction"` 方向属性:
+> [!NOTE]
+> 當你在一個 `animation-*` 屬性上指定多個以逗號分隔的值時，它們會按照 {{cssxref("animation-name")}} 出現的順序應用於動畫。關於動畫數量與 `animation-*` 屬性值數量不匹配的情況，請參見[設定多個動畫屬性值](/zh-TW/docs/Web/CSS/CSS_animations/Using_CSS_animations#設定多個動畫屬性值)。
 
-    | `animation-direction`            | `first relevant keyframe` |
-    | -------------------------------- | ------------------------- |
-    | `normal` 或 `alternate`          | `0%` 或 `from`            |
-    | `reverse` 或 `alternate-reverse` | `100%` 或 `to`            |
+> [!NOTE]
+> 在建立 [CSS 滾動驅動動畫](/zh-TW/docs/Web/CSS/CSS_scroll-driven_animations)時，`animation-fill-mode` 的效果與常規的基於時間的動畫相同。
 
-- `both`
-  - : 动画将遵循开始和结束后的帧动画进行停留，也就是说会从第一帧开始停留显示，动画执行之后会停留到动画结束时的状态。
+## 形式定義
 
-    与上面两个值的差别是，如果元素使用 **`forwards`**、**`backwards`** 两个值会在没有添加动画之前的展示状态进行停留，执行动画的时候才会开始执行关键帧，有这么一些细小的差别。
+{{cssinfo}}
 
-> [!NOTE]
-> 当你在一个 `animation-*` 属性上指定多个逗号分隔的值时，它们将被分配给 `"animationname"` 属性中指定的动画，这取决于有多少动画。有关更多信息，请参见[设置多个动画属性值](/zh-TW/docs/Web/CSS/CSS_animations/Using_CSS_animations#setting_multiple_animation_property_values)。
+## 形式語法
+
+{{csssyntax}}
+
+## 範例
 
-## Example
+### 設定填充模式
 
-You can see the effect of `animation-fill-mode` in the following example. It demonstrates how, for an animation that runs for an infinite time, you can cause it to remain in its final state rather than reverting to the original state (which is the default).
+你可以在下面的範例中看到 `animation-fill-mode` 的效果。它展示了如何讓動畫保持在最終狀態，而不是恢復到原始狀態（這是預設行為）。
 
-### HTML
+#### HTML
 
 ```html
-<p>Move your mouse over the gray box!</p>
+<p>將你的滑鼠移到灰色方塊上！</p>
 <div class="demo">
-  <div class="growsandstays">This grows and stays big.</div>
-  <div class="grows">This just grows.</div>
+  <div class="grows-and-stays">這個會變大並保持大小。</div>
+  <div class="grows">這個只會變大。</div>
 </div>
 ```
 
-### CSS
+#### CSS
 
 ```css
 .demo {
@@ -99,16 +219,29 @@ You can see the effect of `animation-fill-mode` in the following example. It dem
   animation-duration: 3s;
 }
 
-.demo:hover .growsandstays {
+.demo:hover .grows-and-stays {
   animation-name: grow;
   animation-duration: 3s;
   animation-fill-mode: forwards;
 }
 ```
 
-查看 [CSS animations](/zh-TW/docs/Web/CSS/CSS_animations/Using_CSS_animations) 更多有關的例子
+#### 結果
+
+{{EmbedLiveSample('設定填充模式',700,300)}}
+
+更多範例請參見 [CSS 動畫](/zh-TW/docs/Web/CSS/CSS_animations/Using_CSS_animations)。
+
+## 規範
+
+{{Specifications}}
+
+## 瀏覽器相容性
+
+{{Compat}}
 
-## 相關鏈接
+## 參見
 
-- [Using CSS animations](/zh-TW/docs/Web/CSS/CSS_animations/Using_CSS_animations)
+- [使用 CSS 動畫](/zh-TW/docs/Web/CSS/CSS_animations/Using_CSS_animations)
 - JavaScript {{domxref("AnimationEvent")}} API
+- 其他相關的動畫屬性：{{cssxref("animation")}}、{{cssxref("animation-composition")}}、{{cssxref("animation-delay")}}、{{cssxref("animation-direction")}}、{{cssxref("animation-duration")}}、{{cssxref("animation-iteration-count")}}、{{cssxref("animation-name")}}、{{cssxref("animation-play-state")}}、{{cssxref("animation-timeline")}}、{{cssxref("animation-timing-function")}}