在 CSS 中，設(shè)置元素的列表項(xiàng)動(dòng)畫填充模式可以通過 `animation-fill-mode` 屬性來實(shí)現(xiàn)。這個(gè)屬性控制著動(dòng)畫在播放之前和之后，目標(biāo)元素的樣式狀態(tài)。

`animation-fill-mode` 有四個(gè)可能的值：

`none`：默認(rèn)值，動(dòng)畫在播放之前和之后，目標(biāo)元素不會(huì)保持任何樣式狀態(tài)。動(dòng)畫只是在播放過程中改變?cè)氐臉邮?，播放結(jié)束后，元素恢復(fù)到動(dòng)畫開始之前的樣式。

以下是一個(gè)使用 `none` 值的示例代碼：

```css

ul {

list-style-type: none;

animation: slide-in 1s ease-in-out;

animation-fill-mode: none;

}

@keyframes slide-in {

from {

transform: translateX(-100%);

}

to {

transform: translateX(0);

}

}

```

在這個(gè)例子中，`ul` 元素的列表項(xiàng)在動(dòng)畫播放之前和之后都保持默認(rèn)的樣式，只是在動(dòng)畫播放過程中從左側(cè)滑入到原來的位置。

`forwards`：動(dòng)畫在播放完成后，保持最后一幀的樣式。也就是說，元素會(huì)保留動(dòng)畫結(jié)束時(shí)的樣式，即使動(dòng)畫不再播放。

示例代碼如下：

```css

ul {

list-style-type: none;

animation: slide-in 1s ease-in-out;

animation-fill-mode: forwards;

}

@keyframes slide-in {

from {

transform: translateX(-100%);

}

to {

transform: translateX(0);

}

}

```

這里，當(dāng)動(dòng)畫播放結(jié)束后，`ul` 元素的列表項(xiàng)會(huì)停留在動(dòng)畫結(jié)束時(shí)的位置，即從左側(cè)滑入到原來的位置。

`backwards`：在動(dòng)畫開始之前，應(yīng)用動(dòng)畫的第一幀樣式。這樣，即使動(dòng)畫尚未開始播放，元素也會(huì)先顯示動(dòng)畫的初始狀態(tài)。

以下是代碼示例：

```css

ul {

list-style-type: none;

animation: slide-in 1s ease-in-out;

animation-fill-mode: backwards;

}

@keyframes slide-in {

from {

transform: translateX(-100%);

}

to {

transform: translateX(0);

}

}

```

在這個(gè)例子中，當(dāng)頁面加載時(shí)，`ul` 元素的列表項(xiàng)會(huì)先顯示從左側(cè)滑入的初始狀態(tài)，然后在動(dòng)畫開始后繼續(xù)滑動(dòng)到原來的位置。

`both`：同時(shí)應(yīng)用 `forwards` 和 `backwards` 的效果。動(dòng)畫在播放之前和之后都會(huì)保持相應(yīng)的樣式狀態(tài)。

示例代碼如下：

```css

ul {

list-style-type: none;

animation: slide-in 1s ease-in-out;

animation-fill-mode: both;

}

@keyframes slide-in {

from {

transform: translateX(-100%);

}

to {

transform: translateX(0);

}

}

```

在這種情況下，`ul` 元素的列表項(xiàng)在動(dòng)畫開始之前會(huì)顯示初始狀態(tài)，動(dòng)畫播放結(jié)束后會(huì)保持最終狀態(tài)。

通過設(shè)置 `animation-fill-mode` 屬性，我們可以更好地控制動(dòng)畫在播放前后的樣式表現(xiàn)，從而實(shí)現(xiàn)更流暢、更自然的動(dòng)畫效果。根據(jù)不同的需求，選擇合適的填充模式可以讓動(dòng)畫更加符合設(shè)計(jì)要求，提升用戶體驗(yàn)。