Zi 字媒體

此篇文章瀏覽量： 806 之前的文章中，已經學到了透過 @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 的時候，偶數次會依照正常方向來執行，奇數次會依照反方向來執行。 範例 此篇文章同步於字媒體部落格。 若覺得文章有幫助，請多分享，讓其他同好也能吸收網站技能知識。 Facebook Twitter