search
[CSS Animation] 7. 使用 animation-fill-mode 設定當動畫「開始之前」或「結束之後」的狀態

[CSS Animation] 7. 使用 animation-fill-mode 設定當動畫「開始之前」或「結束之後」的狀態

此篇文章瀏覽量: 445

一般來說,動畫在結束時(執行到 100%),會跳回至最初始的狀態;以及若有設定延遲時間的話,則元素的動態效果並不會套用到 0% 的狀態。有時這樣會導致有跳的奇怪現象。可以透過 animation-fill-mode ,我們可以決定該動畫效果在「開始之前」是否要套用 0% 時的狀態;動畫「結束之後」,是否要停留在結束時的狀態,即 100%。

此此文章同步於 字媒體部落格

forwards 範例

以下建立了一個簡單的改變顏色的動畫效果(背景紅色轉變成背景藍色),兩個 div 區塊,都套用了相同的 CSS,唯一的差別,只有在第二個 div 區塊,加上了 animation-fill-mode: forwards; 的效果,會發現,最後的結束狀態,停留在 100% 時的樣式上(也就是背景藍色)。

然而,第一個 div 的動畫效果(未套用 animation-fill-mode),在執行完動畫效果後,會直接「跳」回至初始的狀態(也就是沒有背景色)。

也可以搭配 animation-iteration-countanimation-direction 一起使用,將 animation-fill-mode 設定為 forwards ,都會停留在動畫最後的結束狀態。

backwards 範例

然後,相反的,假設某元素套用了一個動畫後(背景紅色轉變成背景藍色),有設定延遲時間(animation-delay)才執行,可以藉由設定 animation-fill-mode: backwards; 也可以讓元素一開始就套用 from0% 的狀態。

both:同時套用 forwards 和 backwards

如果想要同時套用 forwards 和 backwards 的話,那就將 animation-fill-mode 設定成 both 即可:

animation-fill-mode: both;

若覺得文章有幫助,請多分享,讓其他同好也能吸收網站技能知識。

本文由 Carlos Chang 提供 原文連結

寫了435篇文章,獲得0次喜歡
留言回覆
回覆
熱門推薦
精彩推薦