CSS3動(dòng)畫(huà)是一種利用CSS屬性和關(guān)鍵幀來(lái)實(shí)現(xiàn)動(dòng)態(tài)效果的技術(shù)。

當(dāng)我們完成了一段CSS3動(dòng)畫(huà)后，我們可能會(huì)發(fā)現(xiàn)執(zhí)行完后元素回到了最初的位置或狀態(tài)，而不是停留在我們期望的狀態(tài)上。

那么如何才能讓CSS3動(dòng)畫(huà)執(zhí)行完后元素停留在我們期望的位置或狀態(tài)上呢？

這時(shí)我們就需要使用CSS的一個(gè)重要屬性——

animation-fill-mode

該屬性的默認(rèn)值為none，也就是說(shuō)動(dòng)畫(huà)執(zhí)行完畢后元素會(huì)回到最初的狀態(tài)。可以通過(guò)以下幾種值來(lái)控制動(dòng)畫(huà)執(zhí)行完畢后元素的狀態(tài)：

/* 動(dòng)畫(huà)執(zhí)行完畢后元素停留在最后一幀的狀態(tài)上 */
animation-fill-mode: forwards;
/* 動(dòng)畫(huà)執(zhí)行完畢后元素停留在最初的狀態(tài)上 */
animation-fill-mode: backwards;
/* 動(dòng)畫(huà)執(zhí)行完畢后元素停留在最后一幀的狀態(tài)上，但是回退到第一幀的狀態(tài)也是動(dòng)畫(huà)過(guò)程中的效果 */
animation-fill-mode: both;
/* 動(dòng)畫(huà)執(zhí)行完畢后元素保持動(dòng)畫(huà)的最終狀態(tài)或初始狀態(tài)或none值，取決于它自己的animation-direction值 */
animation-fill-mode: none;

因此，只需要在動(dòng)畫(huà)的聲明中添加這一屬性并設(shè)置對(duì)應(yīng)的值，就可以實(shí)現(xiàn)CSS3動(dòng)畫(huà)執(zhí)行完畢后固定的效果啦。