如何理解 Cubic Bezier 動畫曲線？
Cubic Bezier 用起點、兩個控制點與終點描述動畫進度。CSS 固定起點為 (0,0)、終點為 (1,1)，您只需要調整 P1 與 P2。x 軸代表已經過的時間，y 軸代表屬性完成的比例；曲線越陡，該階段移動越快。
x1 與 x2 必須位於 0 到 1，因為時間不能倒流；y 值可以超出範圍，讓元素短暫超過終點或先往反方向移動。這類效果很有表現力，但應避免用於需要精準預期的表單或導覽操作。
選擇 easing 的原則
- 元素進場常用 ease-out，快速回應後柔和停下。
- 元素離場可用 ease-in，先慢後快地離開。
- 持續旋轉或進度指示適合 linear。
- 介面狀態轉換可用 ease-in-out，起止都較自然。
常見問題
四個數字分別代表什麼？
依序為 x1、y1、x2、y2，也就是兩個控制點的座標。
為什麼控制點 x 不能超出 0 到 1？
x 表示時間，CSS 為確保單一時間只對應單一進度，限制 x1 與 x2 的範圍。
y 值超出範圍會怎樣？
動畫屬性可能超過終點或低於起點，形成 overshoot 與 anticipation。
ease 與 ease-in-out 有何差異？
預設 ease 起步速度較積極；ease-in-out 的開始與結束皆緩慢，中段較快。
所有 CSS 屬性都能套 easing 嗎？
只有可動畫化的屬性能平滑插值；display 等離散屬性通常不能產生相同效果。