CSS 立方貝氏曲線產生器
創建 CSS 立方貝氏曲線產生器緩動函數
控制點
Point P1 (x1, y1)
0
0.25
1
0
0.1
1
Point P2 (x2, y2)
0
0.25
1
0
1
1
流行的緩動預設
CSS 輸出
cubic-bezier(0.25, 0.1, 0.25, 1)
Preview
Duration: 500ms
貝塞爾曲線可視化
x1
0.25
y1
0.1
x2
0.25
y2
1
Cubic Bezier 文件
什麼是三次貝塞爾曲線？
A cubic Bezier curve is defined by four points: P0, P1, P2, and P3. In CSS transitions, P0 and P3 are fixed at (0, 0) and (1, 1) respectively, representing the start and end of the transition. The curve is determined by the coordinates of the two control points, P1 and P2.
CSS 語法
transition-timing-function: cubic-bezier(x1, y1, x2, y2);
常見用例
- 動畫過渡：為更改屬性的元素創建平滑的動畫。
- 捲動效果：控制滾動動畫的速度。
- 互動元素：定義元素如何回應使用者交互，如懸停或按兩下。
- 動作設計：為UI元素製作複雜的運動序列。
流行的緩動函數
Ease (default)
開始緩慢，快速加速，然後再次減速。
cubic-bezier(0.25, 0.1, 0.25, 1)
Linear
從頭到尾保持恆定速度。
cubic-bezier(0, 0, 1, 1)
Ease-in
開始緩慢，然後加速。
cubic-bezier(0.42, 0, 1, 1)
Ease-out
快速啟動，然後減速。
cubic-bezier(0, 0, 0.58, 1)
創建自訂曲線的提示
- 將 x 值保持在 0 和 1 之間：超出此範圍的值可能會導致意外行為。
- 視覺化曲線：使用互動式圖形瞭解更改如何影響動畫。
- 使用真實元素進行測試：始終使用實際的UI元件預覽曲線，以確保其感覺正確。
- 儲存預設：為將來的專案添加有用的曲線書籤。