CSS 工作流程

CSS 動態曲線：控制點、過衝與減少動態

動態曲線決定動畫在一段時間內如何前進。先用編輯器比較移動方式，再回到你的介面檢查實際距離、觸發方式與使用者偏好。

內容更新：2026-09-24 · 維護者與修正回報

分開看時間與進度

cubic-bezier(x1, y1, x2, y2) 的起終點固定為 (0, 0) 與 (1, 1)。兩個控制點負責拉彎曲線，不代表動畫一定會經過它們。橫軸是經過時間的比例，縱軸是輸出進度；圖表不是速度圖，也不是物件實際移動的路徑。

兩個 x 座標都必須介於 0 與 1。CSS 允許 y 超出這個區間。本編輯器接受有限的數值座標，包含小數與科學記號；y 的顯示範圍限定為 −10 至 10。超出工具範圍，不代表 CSS 規範禁止該數值。

先從 ease、ease-in、ease-out 或 ease-in-out 開始。與 linear 比較時，保持移動距離和播放時間一致。適合按鈕短距離移動的曲線，套到全螢幕移動可能令人不適。距離與時間仍是設計選擇，不能由曲線替你判定。

編輯器使用瀏覽器原生動畫引擎預覽單次向前位移，修改數值後不會自動播放。複製的 transition 包含你選擇的時間；單獨的曲線值也能放入 animation-timing-function，但它可能分別套用在關鍵影格之間，須在該情境實測，不能假設與這裡的預覽完全相同。

例如 cubic-bezier(0.34, 1.56, 0.64, 1) 可以先越過終點，再回到目標。控制點超出 0–1 只表示可能過衝，不保證曲線本身一定超出該區間。圖表會顯示整條曲線；很強的位移可能暫時離開有限的預覽區。

不同 CSS 屬性對超出範圍的插值處理不同。transform 可以明顯越過目標，opacity 則有自己的數值範圍。單一 cubic 曲線也不是多次彈跳的彈簧模擬。請用真正要動態改變的屬性，並在目標瀏覽器確認效果。

請在使用這段 CSS 的介面中處理 prefers-reduced-motion。非必要的移動應可關閉，並保留內容與互動功能。下方範例移除裝飾性 transition，仍保留操作後的最終狀態；它不是所有動畫都適用的統一政策。

編輯器一開始呈現靜態圖表。偵測到減少動態偏好時，播放還需要明確勾選同意，並保留停止控制。鍵盤使用者可以編輯四個有標籤的欄位，或聚焦控制點後使用方向鍵。這些設計讓本工具可操作，不能替你貼入 CSS 的整個介面核發無障礙認證。

.card {
  transition: transform 300ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
}

資料可信度