CSS 緩動曲線

常見問題

這些值放在哪裡？

放進 transition-timing-function 或 animation-timing-function 屬性，或者 transition 簡寫的時序位置，例如 transition: transform .3s cubic-bezier(0.33, 1, 0.68, 1)。關鍵字條目（ease、ease-in 等）是瀏覽器內建的，cubic-bezier() 值在所有現代瀏覽器中都可用。

色塊怎麼看？

橫軸是從開始到結束的時間，縱軸是數值移動的程度。起步平緩、結尾陡峭的曲線（ease-in）先慢後快；相反形狀（ease-out）先快後穩。兩條淺色橫線標記 0 與 1，back 系列越界回彈的區間一目了然。

out 曲線和 in 曲線怎麼選？

在 UI 中，ease-out 系列幾乎是預設選擇：動作快速啟動、減速落位時介面顯得反應靈敏。ease-in 系列主要用於離開畫面的元素，in-out 系列用於在畫面內開始並結束的移動，比如卡片換位。

back 曲線裡的負值是什麼意思？

控制點超出 0 到 1 的範圍時，數值會先越過起點或終點再回落，讀起來像一次小回彈。它適合 translate、scale 這類 transform，但要避免用在會被截斷的屬性上，比如 opacity，越界部分會被直接裁掉。