概念

keyframe

keyframe 用來描述影格/畫面的狀態，使用 @keyframes 這個關鍵字

/* animation-name 為自訂名稱 */
@keyframes animation-name {
  from {
    transform: translateY(20px);
  }
  to {
    transform: translateY(0px);
  }
}

/* from, to 也可以用 0%, 100% 表示 */
@keyframes animation-name {
    0% {
        transform: translateY(20px);
    }
    100% {
        transform: translateY(0px);
    }
}

animation

使用 @keyframes 定義每一個影格的樣式後，可以使用 animation 相關屬性設定動畫效果

• animation-duration：播放 @keyframes 的時間，預設是 0s，不得為負數
• animation-timing-function：速度函數，例如：linear、ease，也可以自訂 cubic-bezier() 貝茲曲線
• animation-iteration-count：@keyframes 總共要播放的次數，要循環播放可以使用 infinite
• animation-direction：播放方向
  • normal：預設值，0% ~ 100%
  • reverse：反轉播放，100% ~ 0%
  • alternate：正反正反輪流播放 (0% ~ 100% -> 100% ~ 0%)
  • alternate-reverse：alternate 的顛倒
• animation-delay：animation 延遲多久播放
• animation-play-state：用來播放或暫停 animation
• animation-fill-mode：

補充 animation-fill-mode

animation-fill-mode 用來控制在動畫開始前和結束後的顯示畫面，animation 預設只會在動畫執行過程中套用 style，一旦動畫結束就會回到初始狀態。

動畫可分成四個階段：

• 初始：動畫尚未觸發前的狀態
• 等待：animation-delay 期間
• 執行：delay 結束，開始執行動畫～結束
• 完成：執行到動畫最後一個影格

而 animation-fill-mode 有四個值：

• none：動畫完成後一律回到初始狀態
• forwards：動畫完成後停在最後一個影格(最後一個影格會取決於 animation-direction 和 animation-iteration-count)
• backwards：等待期為動畫第一個影格，動畫完成後回到第一個影格(第一個影格會取決於 animation-direction 和 animation-iteration-count)
• both：動畫開始前為第一個影格，動畫結束後為最後一個影格

animation shorthand

除了一個一個定義 animation-* 屬性，也可以使用 animation 屬性縮寫

依序為：

1. animation-name
2. animation-duration
3. animation-timing-function
4. animation-delay
5. animation-iteration-count
6. animation-direction
7. animation-fill-mode
8. animation-play-state

＊其中 animation-name 為必填，其他屬性值為選填，都會先使用預設的初始值

參考資源

MDN Web Docs - animation
The CSS animation-fill-mode Property, Explained