CSS 轉場 transition：屬性變化的平滑過渡

CSS 的 transition 屬性可以讓元素在屬性值發生變化時，產生平滑的動畫效果。這讓網頁互動時，樣式的變化不會突兀，而是以平順的方式呈現，提升使用者體驗。

transition 縮寫

transition-property

指定要轉場的 CSS 屬性。例如：color、background-color、width 等。

transition-property: width, background-color;

TIP

• all 為預設值，代表所有可進行動畫的屬性。
• 可用逗號分隔多個屬性。

transition-duration

指定轉場動畫的執行時間。例如：.5s、200ms。單位的設定可以參考這篇 單位表示法。

transition-duration: 0.5s, 1s;

TIP

• 預設為 0s，即無動畫。
• 可用逗號分隔多個執行時間。

transition-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): 自訂貝茲曲線。

transition-timing-function: ease-in;

緩動函式

transition-delay

指定轉場動畫延遲開始的時間。例如：.2s、200ms。單位的設定可以參考這篇 單位表示法。

transition-delay: 0.2s, 0.5s;

TIP

• 預設為 0s，即無動畫延遲。
• 可用逗號分隔多個延遲時間。

多重 transition

可針對多個屬性分別設定不同的動畫。

transition-property: width, background-color;
transition-duration: 0.5s, 1s;
transition-timing-function: ease, linear;
transition-delay: 0s, 0.2s;

寫在哪裡有差

/* ✅ 進入與離開都有動畫 */
.btn {
  background: #2965f1;
  transition: background 0.3s ease;
}
.btn:hover { background: #1d4ed8; }

/* ❌ 只有進入時漸變，離開會瞬間跳回 */
.btn:hover {
  background: #1d4ed8;
  transition: background 0.3s ease;
}

不能過渡的屬性

沒有中間值的屬性無法過渡，最典型的是 display。想做淡出請改用透明度：

.panel {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.panel.is-open {
  opacity: 1;
  pointer-events: auto;
}

小提醒

別直接用 all。它會監看所有屬性，容易產生預期外的動畫，效能也較差；明確列出要過渡的屬性比較安全。

常見問題

transition 為什麼沒有效果？

常見原因有三個：屬性本身不能過渡、起點的值沒有明確寫出來、或是把 transition 寫在了觸發狀態上而不是元素本身。

哪些屬性不能做轉場？

沒有中間值的屬性都不行，最典型的是 display。想做淡出通常改用透明度，必要時再搭配可見度或延遲處理。

transition 寫在哪裡比較好？

寫在元素本身，這樣進入與離開狀態都會有動畫。寫在觸發狀態上時，只有進入時是漸變，離開會瞬間跳回。

用 all 當作過渡屬性可以嗎？

方便但不建議。它會監看所有屬性，容易連帶產生預期外的動畫，也比較耗效能。明確列出要過渡的屬性比較安全。

延伸閱讀

動畫 animation變形介紹偽類選取器轉場與動畫介紹