這篇文章將為大家詳細(xì)講解有關(guān)如何使用animation-fill-mode屬性，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、微信小程序開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了姜堰免費(fèi)建站歡迎大家使用！

animation-fill-mode屬性是用于當(dāng)動(dòng)畫不播放時(shí)（當(dāng)動(dòng)畫完成時(shí)，或當(dāng)動(dòng)畫有一個(gè)延遲未開始播放時(shí)），要應(yīng)用到元素的樣式，即其動(dòng)畫效果是否可見。

CSS3  animation-fill-mode屬性

作用：animation-fill-mode 屬性規(guī)定動(dòng)畫在播放之前或之后，其動(dòng)畫效果是否可見。

說明：默認(rèn)情況下，CSS 動(dòng)畫在第一個(gè)關(guān)鍵幀播放完之前不會(huì)影響元素，在最后一個(gè)關(guān)鍵幀完成后停止影響元素。animation-fill-mode 屬性可重寫該行為。

語法：

animation-fill-mode : none | forwards | backwards | both;

none：不改變默認(rèn)行為。

forwards： 當(dāng)動(dòng)畫完成后，保持最后一個(gè)屬性值（在最后一個(gè)關(guān)鍵幀中定義）。

backwards：在 animation-delay 所指定的一段時(shí)間內(nèi)，在動(dòng)畫顯示之前，應(yīng)用開始屬性值（在第一個(gè)關(guān)鍵幀中定義）。

both：向前和向后填充模式都被應(yīng)用。

注：Internet Explorer 9 以及更早的版本不支持 animation-fill-mode 屬性。

CSS3  animation-fill-mode屬性的使用示例

效果圖：

關(guān)于如何使用animation-fill-mode屬性就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。