CSS Properties - Animation

CSS Animation 是一種讓 HTML 元素在網頁上產生動態效果的方法。透過定義動畫的關鍵影格與設定元素的動畫屬性，您可以製作平滑的轉場、移動、變形、淡入、淡出等視覺效果。CSS Animation 主要由兩部分組成：

• @keyframes 規則: 定義動畫的關鍵影格。
• animation 屬性: 將動畫應用到元素上。

@keyframes

@keyframes 是 CSS Animation 的核心之一，用來定義動畫過程中 各個時間點 的樣式變化。您可以把它想像成告訴瀏覽器，在某段時間內，這個元素要怎麼改變外觀。

以下為簡單定義方式:

@keyframes 動畫名稱 {
  from {
    /* 動畫開始時的樣式 */
  }
  to {
    /* 動畫結束時的樣式 */
  }
}

以下為詳細定義方式:

@keyframes 動畫名稱 {
  0% {
    /* 動畫開始時的樣式 */
  }
  50% {
    /* 動畫進行到中間的樣式 */
  }
  100% {
    /* 動畫結束時的樣式 */
  }
}

animation

animation 就是 播放某段定義好的 @keyframes 指令。

animation-name

指定要播放的 @keyframes 名稱。

animation-name: 動畫名稱;

animation-duration

指定動畫播放的時間。如: .5s、200ms。單位的設定可以參考這篇 單位表示法。

animation-duration: 2s;

animation-delay

指定延遲動畫播放的時間。如: .2s、200ms。單位的設定可以參考這篇 單位表示法。

animation-delay: 2s;

animation-iteration-count

指定控制動畫的播放次數。

• 3: 執行 3 次。
• infinite: 無限循環。

animation-iteration-count: infinite;

animation-direction

指定控制動畫的播放方向。

• normal: 正常方向。
• reverse: 反向。
• alternate: 正向 -> 反向 -> 正向。
• alternate-reverse: 反向 -> 正向 -> 反向。

animation-direction: alternate。

animation-timing-function

指定轉長動畫的速度曲線。如: ease、linear、ease-in...等）。

• linear: 線性。
• ease: 先慢後快再慢 (預設值)。
• ease-in: 由慢到快 (加速)。
• ease-out: 由快到慢 (減速)。
• ease-in-out: 慢 → 快 → 慢。
• step-start: 動畫會在轉場一開始就直接跳到最終狀態。
• step-end: 動畫會在轉場結束時才直接跳到最終狀態。
• cubic-bezier(n,n,n,n): 自訂貝茲曲線。

animation-timing-function: ease-in;

緩動函數

animation-fill-mode

• forward: 動畫結束後保持結束時的樣式。
• backward: 動畫結束後返回開始時的樣式。

animation-fill-mode: forward。

animation-play-state

控制動畫的播放狀態。

• running: 播放中。
• paused: 暫停。

animation-play-state: paused;