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

`animation-fill-mode` 有四個可能的值：

`none`：默認值，動畫在播放之前和之后，目標元素不會保持任何樣式狀態(tài)。動畫只是在播放過程中改變元素的樣式，播放結束后，元素恢復到動畫開始之前的樣式。

以下是一個使用 `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);

}

}

```

在這個例子中，`ul` 元素的列表項在動畫播放之前和之后都保持默認的樣式，只是在動畫播放過程中從左側滑入到原來的位置。

`forwards`：動畫在播放完成后，保持最后一幀的樣式。也就是說，元素會保留動畫結束時的樣式，即使動畫不再播放。

示例代碼如下：

```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);

}

}

```

這里，當動畫播放結束后，`ul` 元素的列表項會停留在動畫結束時的位置，即從左側滑入到原來的位置。

`backwards`：在動畫開始之前，應用動畫的第一幀樣式。這樣，即使動畫尚未開始播放，元素也會先顯示動畫的初始狀態(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);

}

}

```

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

`both`：同時應用 `forwards` 和 `backwards` 的效果。動畫在播放之前和之后都會保持相應的樣式狀態(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` 元素的列表項在動畫開始之前會顯示初始狀態(tài)，動畫播放結束后會保持最終狀態(tài)。

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