CSS Properties - 轉場

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

transition 縮寫

transition-property

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

transition-property: width, background-color;

TIP

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

transition-duration

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

transition-duration: .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: .2s, .5s;

TIP

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

多重 transition

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

transition-property: width, background-color;
transition-duration: .5s, 1s;
transition-timing-function: ease, linear;
transition-delay: 0s, .2s;