建立 2025-02-25 更新 2026-09-11

過渡與動畫怎麼選（Transition vs Animation）

兩者都能讓畫面動起來，但觸發方式與複雜度不同。先問：是「狀態切換」還是「有時間軸的表演」？

	`transition`	`animation`
定義	兩個狀態之間插值	`@keyframes` 多段
觸發	樣式變了才播（hover、class）	套上就播，可循環
方向	去程與回程都自動	用 `direction`、`fill-mode` 控制
典型	按鈕、選單展開、焦點	載入轉圈、入場、循環裝飾

選過渡

狀態只有開 / 關，而且回程也要平滑：

.accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
}
.accordion-panel.is-open { grid-template-rows: 1fr; }

選動畫

頁面載入後播一次歡迎效果
無限旋轉的 spinner
中間要停、要誇張放大再收回（多個百分比）

@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-6deg); }
  75% { transform: rotate(6deg); }
}

.icon-warn {
  animation: wiggle 0.5s ease-in-out 2; /* 播兩輪引起注意 */
}

可以一起用

元素入場用 animation，之後的 hover 用 transition，只要別搶同一個屬性：

.card {
  animation: fade-in 0.4s ease both;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgb(0 0 0 / 14%);
}

若入場動畫的最後一幀也設了 transform，hover 的 transform 會整份蓋掉。把入場位移放在外層 wrapper 可避免衝突。

總結

使用者造成的狀態變化 → 過渡
時間軸、循環、多段表演 → 動畫
都要提供 prefers-reduced-motion 的靜態備案

視覺濾鏡見濾鏡。