[CSS Animation] 5. 使用 animation-direction 設定是否要反向執行動畫

之前的文章中,已經學到了透過 @keyframes 來建立動畫,以及套用多個動畫和 animation-name、animation-duration、animation-iteration-count 相關用法。今天來學習 animation-direction 來設定是否要反向的來播放動畫效果。

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

關於 animation-direction

在預設的狀況下,animation-direction 的值會是 normal,那麼就代表 keyframe 的 from 部份,會是從 0% 開始執行,to 會是 100% 的狀態。

然而當 animation-direction 的值設定成 reverse 時,就會從相反的方向來執行,也就是 from 會被視為100% 的狀態,to 會被視為 0% 的狀態。

除了預設的 normal之外,及 reverse,另外還有兩個可設定的值,分別是:alternate、alternate-reverse,敘述如下:

  • normal:預設值,按照正常方向執行。
  • reverse:將 normal 的執行方向,反方向來執行。
  • alternate:交替,當 animation-iteration-count 大於 1 的時候,奇數次會依照正常方向來執行,偶數次會依照反方向來執行。
  • alternate-reverse:反向交替,當 animation-iteration-count 大於 1 的時候,偶數次會依照正常方向來執行,奇數次會依照反方向來執行。

範例

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

您可在此處留言

avatar

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料

  Subscribe  
Notify of