CSS 的 cubic-bezier 時間函式是由恰好四個數字 x1、y1、x2 和 y2 定義,放置在左側固定起始點 (0, 0) 與右側固定結束點 (1, 1) 之間;而選擇正確的產生方式,意味著必須決定要從 CSS 五個標準化的緩動關鍵字其中之一出發,還是要手動調整這四個座標以符合你真正想要的動態。關鍵字路線快速、可預期,並符合瀏覽器自最早的動畫支援以來所採用的行為;自訂路線則是唯一能夠引入預備動作、 overshoot 或特定品牌感受的方式。大多數專案會混合使用兩者:一般介面動態用關鍵字,少數特別重視時機的瞬間則用自訂曲線。CSS Cubic Bezier Generator 正是圍繞著這個決策所打造。它將五個關鍵字載入為即時預設值,將全部四個座標開放為可編輯的數字,並將產生的曲線以圖形、取樣進度表格與動態預覽呈現,讓你在決定採用之前能先比較各種方式。
CSS Cubic Bezier 實際的定義方式
CSS 中的 cubic-bezier() 函式接受四個數值參數,這四個參數在 CSS Easing Functions Level 1 中被稱為 x1、y1、x2 和 y2 控制座標。曲線在緩動圖左側邊緣錨定於 (0, 0),在右側邊緣錨定於 (1, 1),而兩個中間控制點則決定曲線從起點行進到終點時的斜率形狀。由於 x 軸代表已經過的輸入時間,CSS 要求 x1 與 x2 都必須落在 0 到 1 的閉區間內;若數值超出該範圍,宣告會變成無效,瀏覽器會改用其預設的緩動方式。y 軸代表輸出進度,因此 y1 與 y2 允許低於 0 或高於 1,而這正是用來在動態開始前營造預備動作,以及在動態結束時產生 overshoot 的方式。
CSS 的五個緩動關鍵字——linear、ease、ease-in、ease-out 與 ease-in-out——是這四個座標特定組合的標準化捷徑。根據 W3C 的 CSS Easing Functions Level 1,這些關鍵字對應到固定的數值,這些數值已成為 CSS 動畫與轉場的一部分多年。因為關鍵字是標準化的,任何支援 cubic-bezier() 的瀏覽器都支援這些關鍵字,任何團隊成員都能在不查閱產生器的情況下讀懂其時機。
兩種主要做法:預設關鍵字或自訂控制點
你所能撰寫的每一條 cubic-bezier 曲線,都來自下列兩種工作流程之一。第一種是挑選一個預設關鍵字或其標準化的數值形式,將它貼到 transition 或 animation 中,然後繼續進行。第二種則是設計一條自訂曲線,可以是視覺化地調整四個控制點直到動態看起來正確,也可以是反向工程出一種你已經喜歡的時機感受。
在大多數情況下,關鍵字做法才是正確的選擇。這些標準化曲線涵蓋了最常見的動態需求:等速 (linear)、溫和啟動與收尾 (ease)、緩慢啟動且果斷結束 (ease-out)、遲疑啟動且力道強勁 (ease-in),以及對稱的加速與減速 (ease-in-out)。它們易於閱讀、易於複製,並且能在團隊交接時不需要額外說明。當標準組無法符合設計所要求的動態時,自訂做法才有其發揮空間:例如一個按鈕在被啟動前會向前輕推一下、一個 modal 會 overshoot 過其靜止位置後再回穩,或是圖表的轉場需要在開始時較慢、靠近結尾時較快,卻又不想直接落到 ease-in。
這個決策很少需要在抽象層面做出。專案的型態、受眾、以及被動畫化的屬性,通常會讓答案在你看向你真正想要的時機時變得顯而易見。
何時預設的緩動關鍵字才是正確選擇
當動態是常規的、受眾期望該曲線的表現方式與其他介面一致,且手動調整的成本超過其價值時,就採用預設。這涵蓋大多數的 hover 效果、大多數的淡入淡出、大多數小型 UI 元素上的狀態變更,以及幾乎所有的一致性比獨特性更重要的 tooltip 或下拉選單。這五條標準化曲線同樣很適合用於無障礙設計:它們為動態設計師所熟悉、在圖表上呈現舒適,且很少產生可能令使用者感到不適的極端行為。
下表列出由 CSS Easing Functions Level 1 所定義的關鍵字數值。當你在產生器中按下任一關鍵字按鈕時,載入的就是這些精確的數值控制點。
| Keyword | x1 | y1 | x2 | y2 | Common use |
|---|---|---|---|---|---|
| linear | 0 | 0 | 1 | 1 | Constant speed, looping motion, color fades |
| ease | 0.25 | 0.1 | 0.25 | 1 | Default for many browsers, gentle start and settle |
| ease-in | 0.42 | 0 | 1 | 1 | Elements leaving the screen, decisive arrivals |
| ease-out | 0 | 0 | 0.58 | 1 | Elements arriving on screen, confident stops |
| ease-in-out | 0.42 | 0 | 0.58 | 1 | Symmetric motion, page-level transitions |
這些數值是產生器保留作為已測試案例的標準化參考點,因此在工具中按下任一關鍵字按鈕,所載入的會是精確相同的座標,而不是從記憶中取近似值。
何時自訂控制點值得額外的投入
當動態必須做到關鍵字組無法表達的事情時,自訂控制點才值得投入。最清楚的例子是 overshoot——也就是被動畫化的數值會越過其目標,然後再回穩;若不使用關鍵影格,在 CSS 中達成這點的唯一方式就是將 y2 設定為高於 1。預備動作則是相反的情形——在向前動態之前先做一個微小的反向拉動,這需要一個低於 0 的 y 值。當產品希望所有轉場都帶有某種特定實體材質感的「品牌專屬時機」,也會受益於自訂曲線,因為關鍵字在本質上是通用的。
當被動畫化的屬性較為特殊時,自訂曲線同樣有幫助。一段在長距離上進行的長 transform,在 ease-in-out 下可能感覺平板,但改用一條中段較陡、收尾較緩的自訂曲線,就能煥發活力。一段短促的 opacity 淡入,在 ease-in 下可能顯得遲緩,但若改用一條 y1 在輸入進度前 30% 期間維持接近 0 的自訂曲線,則會顯得俐落。放棄關鍵字的理由不在於新奇,而在於契合度。
有兩個限制約束著你能輸入的內容。x 座標必須維持在 0 到 1 之間,因為它們描述的是輸入時間的位置;超出該範圍的數值會讓 cubic-bezier() 宣告變成無效。y 座標描述的是輸出進度,在工具中可以為 -10 到 10 之間的任意有限值,這個範圍已足以表達強烈的預備動作或 overshoot,同時又不會產生技術上雖然有效、實際上卻無法使用的曲線。若你想複習這些 y 值的行為方式,關於 y1 與 y2 超出 0–1 範圍的說明會逐步介紹其實際效果。
如何在 CSS Cubic Bezier Generator 中挑選正確的做法
CSS Cubic Bezier Generator 的設計,就是為了讓「預設 vs 自訂」這個決策變得明確。兩條路線都會產出同一個成品——一段完整的 transition-timing-function 宣告,以下步驟說明如何在其中做選擇並在複製前加以確認。
- 開啟 CSS Cubic Bezier Generator,並判斷你想要的動態屬於常規或非常規。若為常規,請點選五個關鍵字按鈕其中之一——linear、ease、ease-in、ease-out 或 ease-in-out——以載入標準化的控制座標;若為非常規,則清空輸入欄位,並在允許範圍內輸入你自己的 x1、y1、x2、y2 數值。
- 檢查圖形,確認曲線的形狀與預期相符。標準曲線應位於可見方形範圍之內;若你刻意選擇極端的 y 值,曲線的某些部分可能會刻意延伸出該框架外,而實際計算出的緩動仍會控制取樣表格與預覽。
- 讀取五個數值取樣,這些取樣會顯示在輸入進度 0、0.25、0.5、0.75 與 1 處的輸出進度。此工具會先解出 x 座標符合所請求輸入的曲線參數,再求 y 值,因此輸入進度 0.5 處的數值反映的是經過的時間,而不是曲線參數 0.5 的值。
- 點選 Run preview,以觀察一段 900 毫秒的 transform 轉場,使用所產生的精確緩動字串在兩個位置之間播放。重複點擊以比較正向與反向動態,並感受該曲線在具代表性的距離上的表現。
- 當曲線看起來合適時,複製該宣告。此工具會序列化全部四個座標,即使該曲線來自於關鍵字也是如此,因此結果可以被記錄、進行 diff 比較以及修改,而不會藏有隱含的預設值。複製的文字會包含結尾的分號,讓它能直接貼入樣式表中。
- 將產生的緩動套用至真實元件、真實屬性,搭配真實的距離與持續時間,並在這些條件下確認其動態。由於預覽展示的是時機,而不是實際執行時的效能,最終的測試必須在最終的介面中進行。
在確認採用之前驗證曲線
三個快速的檢查就能抓出曲線上線後會冒出來的大多數問題。首先,確認 x 值落在 0 到 1 之內;產生器不會讓你為 x1 或 x2 輸入超出該範圍的數值,因此若此處出問題,通常代表該數值是在曲線貼上之後才被編輯過。其次,掃過取樣表格,看看是否有任何讓你意外的數值。若輸入進度 0.25 處的取樣與輸出進度 0.25 相差甚遠,代表該曲線比 ease-in 或 ease-out 更為激進,這可能符合或不符合你的預期。第三,將預覽正向與反向各執行數次,以感受曲線在開頭、中段與結尾的表現。
若曲線通過這些檢查,請複製宣告並在實際情境中測試。若有感覺不對勁之處,請盡可能調整 y 值而非 x 值,因為改變 y 值會改變曲線的形狀,卻不會影響輸入進度的時機,如此能使總持續時間保持可預期。在 如何使用 cubic-bezier CSS 進行自訂緩動 的比較指南中,涵蓋了更多在不破壞輸入時間軸的情況下調整 y 值的模式。
Applying the Chosen Curve in Real CSS
產生器只會輸出 transition-timing-function 的值，其餘的 transition 仍由你掌握。其中重要的四個部分分別是動畫屬性、距離、持續時間，以及時間函式本身。同一條曲線在 16 像素的 hover 狀態下感覺恰到好處，套用到 320 像素的 modal 上可能截然不同，因此不應期待同一組數值能通行無阻。請讓持續時間對應距離、讓 easing 對應屬性，並在不影響變更語意的情況下，尊重使用者偏好減少動畫的設定。
由於產生器在複製的宣告中會一併顯示這四個數字，曲線便能交由團隊成員檢視、收錄進設計系統，並與樣式表其餘部分一同納入版本控制。工具中的關鍵字按鈕會載入標準化數值，但最終輸出的永遠是明確列出四個數字的格式，因此你提交的檔案裡不會出現那種會在不同函式庫之間漂移的神祕關鍵字。這就是一個可供審核的生成曲線，與一個雖然語法正確但完全無法閱讀的曲線之間，實際上的差異所在。