在CSS中，可以使用animation-fill-mode屬性來(lái)控制動(dòng)畫(huà)在播放前后的狀態(tài)。animation-fill-mode屬性有以下四個(gè)值：

1、none：默認(rèn)值，動(dòng)畫(huà)在播放前后不會(huì)應(yīng)用任何樣式。

2、forwards：動(dòng)畫(huà)結(jié)束后，會(huì)保持***后一幀的狀態(tài)，直到下一次動(dòng)畫(huà)開(kāi)始。

3、backwards：動(dòng)畫(huà)開(kāi)始前，會(huì)應(yīng)用***幀的狀態(tài)，直到動(dòng)畫(huà)開(kāi)始播放。

4、both：同時(shí)應(yīng)用forwards和backwards的值，即動(dòng)畫(huà)開(kāi)始前會(huì)應(yīng)用***幀的狀態(tài)，結(jié)束后會(huì)保持***后一幀的狀態(tài)。

如果想要讓CSS動(dòng)畫(huà)在鼠標(biāo)移開(kāi)后才結(jié)束，可以使用forwards或both值來(lái)控制動(dòng)畫(huà)的填充模式，這樣，即使鼠標(biāo)移開(kāi)了，動(dòng)畫(huà)也會(huì)繼續(xù)播放直到結(jié)束。

假設(shè)有一個(gè)CSS動(dòng)畫(huà)如下：

@keyframes example {
  0% { background-color: red; }
  50% { background-color: orange; }
  100% { background-color: blue; }
}
.my-element {
  animation: example 2s;
  animation-fill-mode: forwards;
}

在這個(gè)例子中，my-element的背景色會(huì)在2秒內(nèi)從紅色變?yōu)樗{(lán)色，如果鼠標(biāo)在動(dòng)畫(huà)播放過(guò)程中移開(kāi)，動(dòng)畫(huà)仍然會(huì)繼續(xù)播放，直到背景色變?yōu)樗{(lán)色。

使用forwards或both值來(lái)控制CSS動(dòng)畫(huà)的填充模式，可以確保動(dòng)畫(huà)在鼠標(biāo)移開(kāi)后才完全結(jié)束，這種方法在創(chuàng)建交互式UI或游戲時(shí)特別有用，可以確保用戶的交互不會(huì)中斷動(dòng)畫(huà)的播放。