Skip to content

Latest commit

 

History

History
21 lines (10 loc) · 763 Bytes

8.5-animation-direction.md

File metadata and controls

21 lines (10 loc) · 763 Bytes
Raw

7.5 animation-direction

animation-direction 說明

透過 animation-direction 來設定動畫效果的執行方向，這裡指的方向，意思是從 0% 到 100%；那反向就是從 100% 到 0%。

animation-direction 常用的設定值

  • normal：預設值，按照正常方向(0% ~ 100%)。
  • reverse：將 normal 的執行方向，反方向來執行。(100% ~ 0%)
  • alternate：方向反覆交替，當 animation-iteration-count 大於 1 的時候，才會有效。第一次是正向執行。
  • alternate-reverse：方向反覆交替，當 animation-iteration-count 大於 1 的時候，才會有效。第一次是反向執行。

例：

{% embed url="https://codepen.io/carlos411/pen/NWePrNE" %}