Cách dùng Tạo Cubic Bezier
- Kéo hai tay cầm màu tím để chỉnh đường cong, hoặc nhập trực tiếp bốn số.
- Nhấn Play để đua đường cong của bạn với một easing chuẩn như
ease. - Với chuyển động vật lý, chuyển sang Spring hoặc Bounce rồi điều chỉnh độ cứng, giảm chấn hoặc số lần nảy.
- Sao chép giá trị cho CSS, Tailwind, Web Animations API, Framer Motion hoặc GSAP.
Easing cubic-bezier là gì?
Đường cong easing ánh xạ thời gian (trục x) sang tiến độ (trục y). cubic-bezier(x1, y1, x2, y2) mô tả đường cong đó bằng hai điểm điều khiển; điểm đầu (0,0) và điểm cuối (1,1) là cố định. Đường cong tăng nhanh cho cảm giác dứt khoát (ease-out), đường cong bắt đầu chậm tạo cảm giác nặng (ease-in), còn giá trị y lớn hơn 1 hoặc nhỏ hơn 0 sẽ vượt qua đích để tạo hiệu ứng “back” sinh động. Giá trị x phải nằm trong khoảng từ 0 đến 1.
Nên dùng easing nào?
| Chuyển động | Easing | Lý do |
|---|---|---|
| Phần tử xuất hiện trên màn hình | ease-out (ví dụ cubic-bezier(.16,1,.3,1)) | Đến nhanh, dừng lại nhẹ nhàng |
| Phần tử rời khỏi màn hình | ease-in | Tăng tốc khi biến mất |
| Chuyển động trong màn hình | ease-in-out | Bắt đầu và kết thúc tự nhiên |
| UI vui nhộn, công tắc | back / spring | Một chút vượt đích tạo cảm giác sống động |
| Thanh tiến trình, spinner | linear | Tốc độ không đổi |
Lò xo và nảy với linear()
Một cubic-bezier chỉ có thể vượt đích một lần. Lò xo thực tế dao động nhiều lần và quả bóng nảy liên tục trên sàn, vì vậy cần hàm linear() của CSS: một danh sách giá trị tiến độ mà trình duyệt nối bằng các đoạn thẳng. Công cụ này mô phỏng lò xo (độ cứng, giảm chấn, khối lượng) hoặc quả bóng nảy, lấy mẫu thành linear() cùng thời lượng cần để chuyển động ổn định. linear() hoạt động trên Chrome và Edge 113+, Firefox 112+ và Safari 17.2+; với trình duyệt cũ hơn, hãy dùng cubic-bezier thay thế.
Bạn có thể dùng đường cong này trong công cụ tạo animation CSS hoặc cho loader trong công cụ tạo CSS loader.
Cũng được tìm dưới tên: cubic bezier generator, css easing, cubic-bezier css, tạo easing css, hàm easing css, css spring animation, linear() css, đường cong bezier css.
Các công cụ dùng kèm tốt với Tạo Cubic Bezier
- Trình tạo CSS Keyframes — Trình chỉnh sửa trực quan cho @keyframes.
- Tạo hiệu ứng hover CSS — Thiết kế animation hover cho nút, thẻ, liên kết và icon.
- Máy tính CSS clamp() — Nhập kích thước tối thiểu, tối đa và dải chiều rộng viewport — bạn sẽ nhận được giá trị clamp() thân thiện với phóng to, kèm giải thích công thức, xem trước trực tiếp và thang chữ hoặc thang khoảng cách linh hoạt hoàn chỉnh.
- Tạo CSS Gradient — Thiết kế gradient trực quan: kéo các điểm màu, đổi góc hoặc kiểu, chọn sẵn một mẫu có sẵn rồi sao chép CSS dùng được ngay, kèm màu nền đặc làm phương án dự phòng.
Câu hỏi thường gặp
Giá trị y có thể lớn hơn 1 hoặc nhỏ hơn 0 không?
Làm thế nào để dùng cubic-bezier trong Tailwind?
ease-[cubic-bezier(0.16,1,0.3,1)], hoặc thêm vào theme.extend.transitionTimingFunction. Khung kết quả hiển thị cả hai cách.