在 CSS 中，設(shè)置元素的表單元素動(dòng)畫填充模式可以通過(guò) `animation-fill-mode` 屬性來(lái)實(shí)現(xiàn)。這個(gè)屬性控制著動(dòng)畫在開始之前和結(jié)束之后的狀態(tài)，它可以有以下幾個(gè)值：

`none`

默認(rèn)值，表示動(dòng)畫在開始之前和結(jié)束之后不會(huì)應(yīng)用任何樣式。元素會(huì)立即顯示其初始狀態(tài)，并且在動(dòng)畫結(jié)束后立即恢復(fù)到初始狀態(tài)。

`forwards`

當(dāng)動(dòng)畫完成后，元素會(huì)保持最后一幀的樣式。這意味著動(dòng)畫結(jié)束后，元素的樣式將是動(dòng)畫結(jié)束時(shí)的樣式，而不是初始樣式。

`backwards`

在動(dòng)畫開始之前，元素會(huì)應(yīng)用動(dòng)畫的初始樣式。即使動(dòng)畫還沒有開始，元素也會(huì)顯示出動(dòng)畫的初始狀態(tài)。當(dāng)動(dòng)畫開始時(shí)，元素會(huì)從初始樣式開始過(guò)渡到最終樣式。

`both`

結(jié)合了 `forwards` 和 `backwards` 的效果。在動(dòng)畫開始之前，元素會(huì)應(yīng)用動(dòng)畫的初始樣式；在動(dòng)畫完成后，元素會(huì)保持最后一幀的樣式。

以下是一些示例代碼，展示了如何使用 `animation-fill-mode` 屬性來(lái)設(shè)置表單元素的動(dòng)畫填充模式：

HTML 結(jié)構(gòu)：

```html

```

在上述示例中，當(dāng)鼠標(biāo)懸停在輸入框上時(shí)，會(huì)觸發(fā) `changeColor` 動(dòng)畫，背景顏色從灰色漸變?yōu)樗{(lán)色。通過(guò)將 `animation-fill-mode` 設(shè)置為 `forwards`，動(dòng)畫結(jié)束后，輸入框的背景顏色將保持為藍(lán)色，而不是恢復(fù)到初始的灰色。

如果將 `animation-fill-mode` 設(shè)置為 `backwards`，則在鼠標(biāo)懸停之前，輸入框的背景顏色就會(huì)顯示為動(dòng)畫的初始顏色（灰色），當(dāng)鼠標(biāo)懸停時(shí)，動(dòng)畫開始從灰色過(guò)渡到藍(lán)色。

如果將 `animation-fill-mode` 設(shè)置為 `both`，則在鼠標(biāo)懸停之前，輸入框的背景顏色會(huì)顯示為動(dòng)畫的初始顏色（灰色），當(dāng)鼠標(biāo)懸停時(shí)，動(dòng)畫開始從灰色過(guò)渡到藍(lán)色，并且在動(dòng)畫結(jié)束后，輸入框的背景顏色將保持為藍(lán)色。

通過(guò)合理使用 `animation-fill-mode` 屬性，可以更好地控制表單元素動(dòng)畫的效果，使其在動(dòng)畫前后的狀態(tài)更加符合設(shè)計(jì)需求。無(wú)論是創(chuàng)建簡(jiǎn)單的鼠標(biāo)懸停效果，還是復(fù)雜的表單交互動(dòng)畫，這個(gè)屬性都能為你的網(wǎng)頁(yè)設(shè)計(jì)增添更多的活力和交互性。