Trình tạo CSS Cubic Bezier

Đườ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.

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.

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.