昨天，只加了短短的一行 CSS 語法，瞬間讓我們的 Slider 從畫面跳動變成滑動了！

第 4 行的 transition 屬性是關鍵，也是 CSS 動畫進行漸變（或稱「轉場」）動畫的主要功能。

您可以用子屬性 property 決定對哪些屬性進行動畫處理，定義 duration 的值決定漸變動畫的持續時間、delay 定義動畫開始的時間，也可以透過 timing-function 這個子屬性定義漸變動畫的樣式效果。

子屬性 (sub-properties)

一共有四個子屬性：

• property
• duration
• timing-function
• delay

可以一次設定的語法：

transition: <property> <duration> <timing-function> <delay>;

接下來我們一一介紹個別設定的語法。

transition-property

指定元素中那一種屬性會被套用效果。
當使用 CSS 集合屬性時，相關的參數屬性都會生效。例如 background。

語法：

transition-property: <property>;

參數：<string>

• 元素的屬性名稱
• 設為 all 代表全部屬性都套用。
• 設為 none 代表全部屬性都不套用。

範例

套用單一屬性，例如寬度：

transition-property: width;

套用單一屬性套用右邊的外框邊距：

transition-property: margin-right;

套用多個屬性：

transition-property: width, margin-right;

transition-duration

屬性指定元素產生漸變動畫效果時所需要的時間，以秒或是毫秒為單位。預設值為 0s 時不會出現動畫效果。

語法：

transition-duration: <time>;

參數：<time>

• 時間單位：s (秒)、ms (毫秒)
• 可接受小數。例如 0.6s。
• 不可使用負值。

範例

設定動畫時間為 2 秒：

transition-duration: 2s;

設定動畫時間為 0.5 秒（500 毫秒）：

transition-duration: 0.5s;
transition-duration: 500ms;

transition-timing-function

當元素進行漸變時，過程中變化的值，由這個子屬性指定的緩動函式進行計算。

timeing-function 函式可以和 property 一起定義不同的元素屬性，使用不同的 timeing-function。如果兩者匹配的數目不一致，超過數量範圍的元素屬性會採用預設值 ease 函式。

屬性值為 <easing-function> 類型的緩動函式，如下：

語法：

transition-timing-function: <easing-function>;

參數：<easing-function>

緩動函式的使用方法，請見第二大段。

transition-delay

指定元素在產生漸變動畫效果之前，先延遲播放的時間，經過這段時間之後開始生效。
屬性值是以秒或是毫秒為單位。預設值為 0s 會立即套用漸變動畫效果。

語法：

transition-delay: <time>;

參數：<time>

• 時間單位：s (秒)、ms (毫秒)
• 可接受小數。例如 0.3s。
• 負值沒有效果，等同 0s。

範例

設定動畫效果等待 2 秒才生效：

transition-delay: 2s;

設定動畫效果等待 0.5 秒（500 毫秒）才生效：

transition-delay: 0.5s;
transition-delay: 500ms;

緩動函式 (Easing Function)

Transition 的子屬性 transition-timing-function 豐富的緩動函式，決定了整個漸變動化的特色，一共有 8 個函式。

• ease
• ease-in
• ease-in-out
• ease-out
• linear
• steps
• cubic-bezier
• step-start
• step-end

step-start 及 step-end 因為不會產生漸變效果的過程，因此不討論。

ease

開始時會緩慢地移動，中間速度變快，但又變慢慢地結束。

語法：

transition-timing-function: ease;

圖 a: 緩動函式 ease 子屬性趣味範例

ease-in

開始時會緩慢地移動，到中間以後速度一致。

語法：

transition-timing-function: ease-in;

圖 b: 緩動函式 ease-in 子屬性趣味範例

ease-in-out

開始時會緩慢地移動，到中間速度一致，結束時變慢，

語法：

transition-timing-function: ease-in-out;

圖 c: 緩動函式 ease-in-out 子屬性趣味範例

ease-out

開始時速度一致，後面緩慢的移動。

語法：

transition-timing-function: ease-out;

圖 d: 緩動函式 ease-out 子屬性趣味範例

linear

線性速率，從開始到結束保持一樣的速度。

語法：

transition-timing-function: linear;

圖 e: 緩動函式 linear 子屬性趣味範例

steps

把動畫效果是把過程切成數個階段，類似影格中突然插入的效果。

語法：

transition-timing-function: steps(n, s);

參數：n:<length> | s:<string>

• 第一個參數是步驟的次數。
• 第二個參數為：start、end、jump-none、jump-both 其中之一。不填的話預設值為 end。

圖 f: 緩動函式 steps 子屬性趣味範例

cubic-bezier (貝茲曲線)

參數為 4 個數字，可自由定義漸變動畫的速率。

語法：

transition-timing-function: cubic-bezier(n, n, n, n);

參數：<number>

• 可接受 0 至 1 之間的小數。
• 可接受負數。

其它函式相當於 cubic-bezier 的以下參數：

鐵人賽動畫杯賽跑

2022 年，天下第一武道大會，鐵人賽動畫杯賽跑，有六位選手參賽，時間為 10 秒，誰能得冠軍呢？

緩動函式比較

【查看範例 18-1】圖 g: 子屬性比較趣味範例

這個趣味性十足的綜合範例，可以大致看出誰快誰慢。
其實都一樣快，只是過程不一樣 XDD。

緩動函式 steps 參數比較

【查看範例 18-2】圖 h: 子屬性 steps 參數比較趣味範例

如果看了 W3C 或 MDN 的文件關於 steps 函式的解說還是不大清楚其中的運作，筆者覺得看圖最快！上面這個 GIF 圖檔為 10 個步驟不同參數的比較，相信會比看文件清楚許多。

總結

我們可以使用 transition 來達成各種動畫效果，而且它的使用很簡單，不需要什麼數學常識，可以很直覺地使用，簡單又強大。有沒有覺得 transition 實在是很有趣？

文中範例可在 GitHub Page 閱讀。
原始碼可在 2022 鐵人賽專用 GitHub Repo 下載。