[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 的時候，偶數次會依照正常方向來執行，奇數次會依照反方向來執行。

範例

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