CSS動畫是為網(wǎng)頁添加更加生動而有趣的元素效果的好方法。在某些情況下，我們想要在動畫完成之前立即停止它，或者在動畫完成后保持它。在這種情況下，我們可以使用CSS屬性“animation-fill-mode”。下面是一個具有終止效果的CSS動畫的示例：

div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 3s;
animation-fill-mode: forwards;
}
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}

在這個示例中，我們定義了一個DIV元素，并為其添加了一個CSS動畫“example”。這個動畫將DIV的背景顏色從紅色變?yōu)辄S色，持續(xù)時間為3秒。在動畫完成后，我們希望DIV的背景顏色保持為黃色，而不是回到紅色。為了實現(xiàn)這一點，我們使用了“animation-fill-mode: forwards”屬性。

“animation-fill-mode”屬性有四個可用選項：

• none：當(dāng)動畫未播放時，元素將保持初始狀態(tài)。當(dāng)動畫播放完后，元素將返回初始狀態(tài)。
• forwards：當(dāng)動畫播放完后，元素將保持最后的狀態(tài)，而不是返回到初始狀態(tài)。
• backwards：當(dāng)動畫未播放時，元素將設(shè)置為起始狀態(tài)。當(dāng)動畫播放完后，元素將返回到起始狀態(tài)。
• both：元素將遵循“forwards”和“backwards”兩個值。

為DIV元素添加“animation-fill-mode: forwards”屬性將使其在動畫完成時保持最終狀態(tài)，即保持背景顏色為黃色。這樣，我們就可以通過使用“animation-fill-mode”屬性來控制CSS動畫的終止效果。