Trình tạo CSS Cubic Bezier trực quan

Được viết và kiểm tra bởi đội ngũ biên tập BroBroGo.Cập nhật lần cuối: 2026-07-31

Nguyên lý hoạt động của hàm cubic-bezier trong CSS

Trong CSS, các thuộc tính transition-timing-function và animation-timing-function quyết định tốc độ thay đổi của một phần tử theo thời gian. Thay vì chuyển động với tốc độ tuyến tính đều đ đều, các hiệu ứng chuyển động thường sử dụng các đường cong gia tốc (easing curves) để tạo cảm giác tự nhiên hơn. Hàm cubic-bezier(x1, y1, x2, y2) định hình đường cong này thông qua hai điểm điều khiển trung gian trên một mặt phẳng tọa độ.

Đường cong gia tốc luôn bắt đầu từ điểm cố định phía dưới bên trái (tọa độ 0, 0, đại diện cho thời điểm bắt đầu và trạng thái ban đầu) và kết thúc ở điểm phía trên bên phải (tọa độ 1, 1, đại diện cho thời điểm kết thúc và trạng thái hoàn thành). Trục hoành (X) biểu thị thời gian trôi từ trái sang phải, trong khi trục tung (Y) biểu thị tiến trình của hoạt ảnh đi lên.

Hai điểm điều khiển trung gian, ký hiệu là P1 (x1, y1) và P2 (x2, y2), hoạt động như các lực hút kéo đường cong về phía chúng. Bằng cách thay đổi vị trí của hai điểm này, tốc độ của hoạt ảnh sẽ thay đổi liên tục: tăng tốc, giảm tốc, hoặc thậm chí di chuyển vượt quá điểm đích rồi quay trở lại.

Các điểm điều khiển và giới hạn tọa độ

Để đảm bảo tính hợp lệ trong CSS, tọa độ của các điểm điều khiển phải tuân thủ các quy tắc toán học nghiêm ngặt:

Trục hoành (X): Giá trị x1 và x2 bắt buộc phải nằm trong khoảng từ 0 đến 1. Điều này đảm bảo thời gian luôn trôi về phía trước một cách tuyến tính, không thể đảo ngược hoặc nhảy vọt.
Trục tung (Y): Giá trị y1 và y2 có phạm vi rộng hơn, giới hạn từ -0.70 đến 1.70. Việc cho phép tọa độ Y vượt ra ngoài khoảng 0 và 1 giúp tạo ra các hiệu ứng chuyển động đặc biệt:
- Hiệu ứng lấy đà (pull-back / anticipate): Khi giá trị Y giảm xuống dưới 0 (tối đa -0.70), phần tử sẽ chuyển động ngược lại hướng đích một chút trước khi lao nhanh về phía trước.
- Hiệu ứng vượt giới hạn (overshoot): Khi giá trị Y vượt quá 1 (tối đa 1.70), phần tử sẽ chuyển động vượt quá vị trí đích cuối cùng, sau đó mới dần ổn định và quay lại điểm kết thúc.

Cách sử dụng Trình tạo CSS Cubic Bezier

Công cụ trực quan này giúp đơn giản hóa quá trình thiết kế đường cong gia tốc bằng cách loại bỏ việc đoán mò các thông số số học.

Điều chỉnh trực quan và nhập liệu

Bạn có thể định hình đường cong bằng hai phương thức tương tác:

Kéo hai tay cầm: Trực tiếp di chuyển các điểm điều khiển trên bảng hiển thị để thay đổi hình dạng đường cong.
Nhập thông số trực tiếp: Thay đổi các giá trị số cho Điểm điều khiển thứ nhất (X, Y) và Điểm điều khiển thứ hai (X, Y).

Hệ thống kiểm soát dữ liệu đầu vào hoạt động theo các quy tắc sau để ngăn chặn lỗi cú pháp:

Giới hạn nhập liệu cho trục X là 0–1 và trục Y là -0.70–1.70.
Nếu bạn nhập một giá trị ngoài phạm vi (ví dụ: nhập 9 cho trục X) rồi chuyển tiêu điểm ra ngoài trường nhập liệu, hệ thống sẽ tự động điều chỉnh về giới hạn gần nhất là 1.
Nếu bạn xóa trống trường nhập liệu và chuyển tiêu điểm ra ngoài, hệ thống sẽ khôi phục lại giá trị hợp lệ trước đó.
Khi một tay cầm điều khiển đang được chọn (focus), bạn có thể nhấn phím mũi tên Trái để giảm giá trị một cách chính xác, ví dụ xuống 0.99.
Các trường nhập liệu trống hoặc chứa ký tự không phải số sẽ tạm dừng cập nhật cho đến khi một giá trị hoàn chỉnh được nhập vào.

Xem trước chuyển động thực tế

Khi bạn điều chỉnh đường cong, một điểm tròn sẽ di chuyển dọc theo đường cong của bạn để mô phỏng tốc độ chuyển động thực tế. Bên cạnh đó, một điểm tròn khác sẽ di chuyển với tốc độ đều (tuyến tính) để bạn dễ dàng so sánh sự khác biệt về nhịp điệu.

Sử dụng các mẫu sẵn có

Công cụ tích hợp sẵn các từ khóa tiêu chuẩn của CSS và các hiệu ứng nâng cao:

Các từ khóa CSS cơ bản: ease, ease-in, ease-out, và ease-in-out. Việc chọn các mẫu này sẽ hiển thị chính xác các thông số tọa độ ẩn sau các từ khóa đó.
Các hiệu ứng chuyển động nâng cao: "Back In", "Back Out", hoặc "Back In-Out". Ví dụ, mẫu "Back Out" (Lùi lại rồi ra) sẽ thiết lập giá trị cụ thể là cubic-bezier(0.34, 1.56, 0.64, 1) để tạo hiệu ứng vượt giới hạn ở cuối hành trình.

Xuất mã CSS

Sau khi đạt được chuyển động ưng ý, bạn có thể sao chép trực tiếp chuỗi mã cubic-bezier(x1, y1, x2, y2) được tạo ra. Khi sao chép thành công, hệ thống sẽ hiển thị trạng thái Copied.

Tích hợp vào mã nguồn CSS

Giá trị sao chép từ công cụ được áp dụng trực tiếp vào các thuộc tính định thời của CSS. Dưới đây là các ví dụ thực tế:

Sử dụng với thuộc tính transition viết tắt hoặc viết rời:

.button {
  transition-property: transform;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Hoặc viết dưới dạng rút gọn */
.card {
  transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

Sử dụng với thuộc tính animation để điều khiển nhịp điệu của các khung hình chính:

@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

.sidebar {
  animation-name: slideIn;
  animation-duration: 0.5s;
  animation-timing-function: cubic-bezier(0.1, 0.8, 0.3, 1);
}

Giới hạn vật lý của một đường cong đơn lẻ

Mặc dù hàm cubic-bezier() rất mạnh mẽ trong việc tạo ra các chuyển động mượt mà, lấy đà hoặc vượt giới hạn, nó vẫn có những giới hạn vật lý cố định.

Một đường cong Bezier bậc ba đơn lẻ chỉ có thể uốn cong tối đa hai lần. Điều này có nghĩa là chuyển động chỉ có thể tăng tốc, giảm tốc, đi quá giới hạn một lần rồi dừng lại. Nó hoàn toàn không thể biểu diễn các hiệu ứng phức tạp đòi hỏi sự đảo chiều liên tục nhiều lần như hiệu ứng nảy (bounce) hoặc hiệu ứng đàn hồi (elastic). Để thực hiện các chuyển động nảy nhiều lần, bạn bắt buộc phải sử dụng các chuỗi khung hình @keyframes phức tạp hoặc hàm linear() thế hệ mới với nhiều điểm dừng.

Cam kết bảo mật dữ liệu

Mọi thao tác tính toán toán học và dựng hình đồ họa đều được thực hiện trực tiếp bằng tài nguyên phần cứng của thiết bị thông qua trình duyệt web của bạn. Không có bất kỳ dữ liệu tọa độ, thông số cấu hình hay hành vi tương tác nào được gửi về máy chủ của BroBroGo.

Câu hỏi thường gặp

Hai tay cầm và bốn con số có ý nghĩa gì? Đường cong chạy từ góc dưới bên trái (bắt đầu) đến góc trên bên phải (kết thúc), với thời gian trôi từ trái sang phải và tiến trình chuyển động đi lên. Hai tay cầm là các điểm điều khiển uốn cong đường cong đó — mỗi điểm có tọa độ X và Y, tạo thành dạng cubic-bezier(x1, y1, x2, y2). Tọa độ X luôn nằm trong khoảng từ 0 đến 1, trong khi Y có thể vượt lên trên đỉnh hoặc xuống dưới đáy để tạo ra chuyển động vượt giới hạn hoặc lấy đà trước khi ổn định.

Làm cách nào để sử dụng giá trị này trong CSS của tôi? Sao chép giá trị cubic-bezier() và dán vào bất kỳ thuộc tính hiệu ứng thời gian nào — transition-timing-function, animation-timing-function, hoặc dạng viết tắt, ví dụ: transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Các từ khóa như ease, ease-in, ease-out và ease-in-out thực chất chỉ là các đường cong cubic-bezier cố định, vì vậy việc chọn một trong các mẫu sẵn có đó sẽ hiển thị cho bạn giá trị chính xác đằng sau từ khóa.

Nó có thể tạo ra hiệu ứng nảy (bounce) hoặc đàn hồi (elastic) không? Bản thân một hàm đơn lẻ thì không thể. Một đường cong cubic-bezier đơn lẻ có thể tạo hiệu ứng lấy đà (anticipate) và vượt giới hạn (overshoot) — các mẫu sẵn có dạng "back" kéo một tay cầm vượt ra ngoài hộp để làm chính xác điều đó — nhưng nó chỉ có thể chuyển động theo một hướng rồi dừng lại. Hiệu ứng nảy (bounce) hoặc đàn hồi (elastic) yêu cầu đảo ngược hướng nhiều lần, điều mà một đường cong cubic-bezier đơn lẻ không thể biểu diễn; những hiệu ứng đó cần đến CSS keyframes hoặc hàm linear() với nhiều điểm dừng.

Hỏi đáp