CSS 轉場與動畫：transition 與 animation 的差別

Q: transition 和 animation 該用哪一個？

由狀態改變觸發、只有起點與終點兩個狀態的，用 transition，例如：滑入變色。需要自動播放、多段變化或重複循環的，用 animation。

Q: 要不要考慮不想看到動畫的使用者？

要。系統層級有降低動態效果的設定，可以用對應的媒體查詢偵測，在該情境下縮短或關閉動畫，這是無障礙的基本要求。

CSS 轉場與動畫提供了簡單、有效的方式，讓網頁元素具備動態效果，提升使用者體驗與視覺吸引力。透過理解 transition、animation、keyframes 等技巧，開發者可以創造更自然且效能優化的互動體驗。

轉場

讓樣式的變化不要瞬間發生，而是以漸變的方式呈現，例如：滑鼠移到按鈕上，顏色會慢慢變深。它必須由狀態改變來觸發，只有起點與終點兩個狀態。

屬性	說明
`transition-property`	指定哪些屬性要過渡。
`transition-duration`	過渡花費的時間。
`transition-timing-function`	速度曲線。
`transition-delay`	延遲多久才開始。

詳細用法請見轉場。

動畫

先用 @keyframes 定義好幾個關鍵影格，元素就會自動依序播放，例如：方塊自動從左移到右。它不需要狀態改變來觸發，也可以重複循環。

屬性	說明
`@keyframes`	定義關鍵影格。
`animation-name`、`animation-duration`	指定要播哪一組影格、播多久。
`animation-iteration-count`	播放次數，可設為 `infinite`。
`animation-direction`	播放方向，可以來回播。
`animation-fill-mode`	播完之後停在哪一格。
`animation-play-state`	暫停與繼續。

詳細用法請見動畫。

兩者的差別

比較項目	轉場 transition	動畫 animation
觸發方式	狀態改變時	載入後自動播放
中間狀態	只有起點與終點	可設多個關鍵影格
重複播放	否	可無限循環
適合的情境	滑入變色、展開收合	載入動畫、輪播、脈動效果

效能與無障礙

css

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}