在網(wǎng)頁制作中，我們常常需要使用 CSS 動(dòng)畫來為網(wǎng)頁添彩。但有時(shí)候動(dòng)畫結(jié)束后，我們需要讓元素停留在動(dòng)畫結(jié)束時(shí)的狀態(tài)，而不是回到初始狀態(tài)。那么該如何實(shí)現(xiàn)呢？

其實(shí)，在 CSS 動(dòng)畫中，有一個(gè)名為

animation-fill-mode

的屬性，可以幫助我們實(shí)現(xiàn)這個(gè)效果。它有以下幾個(gè)可選值：

/* 默認(rèn)值，元素在執(zhí)行動(dòng)畫前和執(zhí)行動(dòng)畫后的樣式都是根據(jù)其自身的樣式表計(jì)算得出的 */
animation-fill-mode: none;
/* 元素會(huì)在動(dòng)畫執(zhí)行前應(yīng)用執(zhí)行前的 keyframe 規(guī)則中的最后一幀 */
animation-fill-mode: forwards;
/* 元素會(huì)在動(dòng)畫執(zhí)行完成后始終應(yīng)用執(zhí)行后的 keyframe 規(guī)則中的最后一幀 */
animation-fill-mode: backwards;
/* 元素會(huì)同時(shí)應(yīng)用執(zhí)行前和執(zhí)行后的 keyframe 規(guī)則中的最后一幀 */
animation-fill-mode: both;

通過將

animation-fill-mode

屬性設(shè)置為

forwards

，即可讓元素停留在動(dòng)畫結(jié)束時(shí)的狀態(tài)。例如：

div {
width: 100px;
height: 100px;
background-color: red;
animation: myanimation 2s;
animation-fill-mode: forwards;
}
@keyframes myanimation {
from { transform: translateX(0); }
to { transform: translateX(200px); }
}

上述代碼中，當(dāng)元素執(zhí)行完

myanimation

動(dòng)畫后，會(huì)停留在最后一幀的狀態(tài)，即向右平移 200 px 的位置。

注意，如果動(dòng)畫執(zhí)行完畢后想再次觸發(fā)動(dòng)畫，需要使用 JavaScript 或者一個(gè)新的動(dòng)畫來觸發(fā)。因?yàn)樵赝Ａ粼趧?dòng)畫結(jié)束狀態(tài)，所以沒有動(dòng)畫執(zhí)行了。