> For the complete documentation index, see [llms.txt](https://docs.webmix.cc/css-animation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.webmix.cc/css-animation/dong-hua-xiao-guo-animation/5.7-animation-fill-mode.md).

# 5.7 填滿模式 animation-fill-mode

## animation-fill-mode 設明

動畫效果的播放期間，指的是從 0% \~ 100%，而 animation-fill-mode 是用來設定，當動畫效果未執行的時候(也就是 0% 之前的延遲期間，以及 100% 之後)，是否要保留 keyframe 是 0% 或 100% 時的 css。

* **`none`**：預設值。
* **`forwards`**：動畫播放結束後，仍保留最後 keyframe(即 100%) 的 css。
* **`backwards`**：動畫在延遲期間( animation-delay )，要停留在第一個 keyframe(即 0%) 的 css。
* **`both`**：同時套用 forwards 及 backwards 的特性。

## 範例

切換 `animation-fill-mode` 四種模式觀察看看：

{% embed url="<https://codepen.io/carlos411/pen/RwNobVM>" %}

在 `div.effect` 加上以下 css，再觀察 `animation-fill-mode` 各種模式：

```css
animation-direction: reverse;
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.webmix.cc/css-animation/dong-hua-xiao-guo-animation/5.7-animation-fill-mode.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.