Trình Tạo Cubic-Bezier CSS

Công cụ này giúp bạn tạo hình đường cong easing CSS cubic-bezier() tùy chỉnh bằng bốn thanh trượt và xem trước trực tiếp trước khi sao chép mã. Điều chỉnh các giá trị điểm điều khiển x1, y1, x2 và y2, quan sát đường cong và một phần tử xem trước đang chuyển động cập nhật ngay lập tức, sau đó sao chép transition-timing-function: cubic-bezier(...) trực tiếp vào stylesheet của bạn.

Công Cụ Này Là Gì?

cubic-bezier() là một hàm thời gian CSS kiểm soát cách một giá trị hoạt ảnh hoặc chuyển tiếp tăng tốc và giảm tốc theo thời gian, thay vì di chuyển với tốc độ không đổi. Nó được xác định bởi hai điểm điều khiển — (x1, y1) và (x2, y2) — uốn cong một đường giữa điểm bắt đầu cố định (0,0) và điểm kết thúc cố định (1,1). Giá trị x phải nằm trong khoảng từ 0 đến 1, nhưng giá trị y có thể vượt ra ngoài phạm vi đó để tạo hiệu ứng vượt quá hoặc nảy.

Điều chỉnh thủ công bốn số thập phân để có được cảm giác không quá đột ngột cũng không quá chậm chạp đòi hỏi rất nhiều lần thử và sai. Công cụ này thay thế việc mò mẫm đó bằng thao tác trực tiếp: kéo một thanh trượt, xem đường cong uốn và quả bóng xem trước di chuyển tương ứng, rồi sao chép CSS khi chuyển động đã đúng ý.

Nguồn: CSS Easing Functions Level 1, W3C — đặc tả định nghĩa cubic-bezier() và năm từ khóa được đặt tên mà các cài đặt sẵn của công cụ này dựa trên đó.

Tại Sao Nên Dùng?

Biểu đồ SVG trực tiếp hiển thị chính xác cách đường cong của bạn uốn giữa các điểm bắt đầu và kết thúc cố định, với cả hai điểm điều khiển và các đường nối được vẽ rõ ràng.
Nút Phát hoạt ảnh hóa một phần tử xem trước di chuyển dọc theo một đường ray bằng chính đường cong của bạn, để bạn cảm nhận chuyển động chứ không chỉ nhìn một biểu đồ tĩnh.
Các mẫu dựng sẵn chỉ với một cú nhấp cho năm hàm easing được đặt tên chuẩn — ease, ease-in, ease-out, ease-in-out và linear — theo đặc tả CSS Easing Functions.
Giá trị y có thể xuống dưới 0 hoặc vượt quá 1, cho phép bạn tạo các kiểu easing vượt quá/nảy mà các từ khóa đặt tên không thể tạo ra.
Tạo ra CSS transition-timing-function sẵn sàng dán vào — cùng một giá trị cũng hoạt động với animation-timing-function.
Chạy hoàn toàn trong trình duyệt của bạn — không có gì bạn cấu hình bị tải lên bất kỳ đâu. Miễn phí, không cần đăng ký.

Cách Sử Dụng

Kéo các thanh trượt x1/y1 để đặt điểm điều khiển đầu tiên, quyết định cách hoạt ảnh bắt đầu.
Kéo các thanh trượt x2/y2 để đặt điểm điều khiển thứ hai, quyết định cách hoạt ảnh kết thúc.
Quan sát đường cong màu đen trên biểu đồ — nếu nó phình lên trên đường chéo ở giai đoạn đầu nghĩa là chuyển động bắt đầu nhanh, nếu ở dưới nghĩa là bắt đầu chậm.
Nhấp Phát để xem một phần tử xem trước di chuyển dọc theo đường ray, sử dụng đường cong của bạn làm transition-timing-function.
Thử một mẫu dựng sẵn (ease, ease-in, ease-out, ease-in-out, linear) làm điểm khởi đầu, sau đó tinh chỉnh các thanh trượt từ đó.
Sao chép CSS được tạo ra và dán vào một quy tắc transition hoặc animation.

Ví dụ

Đầu vào

x1: 0.25, y1: 0.1, x2: 0.25, y2: 1

Đầu ra

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

Đây chính là các điểm điều khiển của từ khóa chuẩn CSS ease — bắt đầu nhanh, sau đó giảm tốc dần dần cho đến khi kết thúc.

Vì sao giá trị y có thể vượt ra ngoài 0–1

Khác với trục x đại diện cho thời gian và phải chạy từ 0 đến 1, trục y đại diện cho tiến trình của giá trị hoạt ảnh và không có giới hạn đó. Đặt y1 dưới 0 hoặc y2 trên 1 khiến đường cong lún xuống trước giá trị bắt đầu hoặc vọt qua giá trị kết thúc trước khi ổn định — đây là nền tảng của hiệu ứng vượt quá và tạo đà thường thấy khi nhấn nút, khi cửa sổ modal xuất hiện, và trong các vi tương tác giao diện vui nhộn. Không từ khóa nào trong năm từ khóa đặt tên (ease, ease-in, ease-out, ease-in-out, linear) có thể tạo ra điều này; cần một cubic-bezier() tùy chỉnh cho việc đó.

transition-timing-function so với animation-timing-function

Giá trị cubic-bezier() mà công cụ này tạo ra hoạt động giống hệt nhau ở cả hai thuộc tính. Dùng transition-timing-function khi chuyển động được kích hoạt bởi thay đổi trạng thái (như hover hoặc chuyển đổi class), và animation-timing-function bên trong một quy tắc hoạt ảnh dựa trên @keyframes khi bạn cần cảm giác đó được áp dụng tự động hoặc lặp lại.

Các kiểu easing phổ biến

Phản hồi giao diện dứt khoát (nút bấm, công tắc): giữ các điểm điều khiển gần đường chéo với thiên hướng ease-out nhẹ, ví dụ cubic-bezier(0.4, 0, 0.2, 1).
Đường cong chuẩn của Material Design: cubic-bezier(0.4, 0, 0.2, 1) — bắt đầu nhanh, kết thúc êm, được dùng rộng rãi cho chuyển tiếp panel và thẻ.
Nảy/vượt quá: đẩy y2 lên trên 1, ví dụ cubic-bezier(0.34, 1.56, 0.64, 1), tạo cảm giác vui nhộn khi xuất hiện.
Tạo đà trước khi chuyển động: đẩy y1 xuống dưới 0 để phần tử hơi lùi lại trước khi tiến lên.
Ease-in-out mượt mà cho hoạt ảnh lặp lại: giữ đường cong gần như đối xứng quanh tâm.

Kết hợp với các công cụ CSS khác

Một đường cong easing hiếm khi đứng riêng lẻ — nó thường được áp dụng cho một phần tử cũng cần bóng đổ, góc bo tròn hoặc gradient. Tạo kiểu hiển thị bằng các công cụ CSS khác bên dưới, sau đó thêm hàm thời gian từ công cụ này vào cùng quy tắc hoặc khai báo transition/animation.

→ Trình Tạo Box Shadow · Trình Tạo Border Radius

Câu Hỏi Thường Gặp

Bốn con số trong cubic-bezier() thực sự có nghĩa là gì?

Đó là tọa độ của hai điểm điều khiển, (x1, y1) và (x2, y2), uốn cong một đường Bézier chạy từ điểm bắt đầu cố định tại (0,0) đến điểm kết thúc cố định tại (1,1). Trục x đại diện cho thời gian đã trôi qua (từ 0 đến 1) và trục y đại diện cho mức độ tiến triển của thuộc tính hoạt ảnh, đó là lý do x1 và x2 phải nằm trong khoảng 0–1 trong khi y1 và y2 có thể vượt ra ngoài phạm vi đó.

Sự khác biệt giữa ease, ease-in, ease-out và ease-in-out là gì?

ease (giá trị mặc định của CSS) bắt đầu nhanh rồi giảm tốc nhẹ nhàng. ease-in bắt đầu chậm và tăng tốc về cuối, hữu ích cho các phần tử rời khỏi màn hình. ease-out bắt đầu nhanh và giảm tốc, hữu ích cho các phần tử đi vào màn hình. ease-in-out chậm ở cả hai đầu và nhanh hơn ở giữa, tạo cảm giác mượt mà, đối xứng.

Tôi có thể dùng cùng một giá trị cubic-bezier() cho cả transition lẫn animation không?

Có. transition-timing-function và animation-timing-function chấp nhận cú pháp cubic-bezier() hoàn toàn giống nhau và tạo ra cùng một đường cong easing — điểm khác biệt duy nhất là hàm thời gian đó được gắn vào tính năng CSS nào (transition hay hoạt ảnh keyframes).

Vì sao đường cong của tôi trông kỳ lạ khi y1 hoặc y2 quá lớn hoặc âm?

Đó là điều bình thường — đẩy giá trị y ra xa khỏi phạm vi 0–1 tạo ra hiệu ứng vượt quá mạnh, trong đó giá trị hoạt ảnh vượt xa mục tiêu trước khi ổn định lại. Đây là hiệu ứng hợp lệ và thường là chủ ý, nhưng nếu không mong muốn, hãy đưa y1 và y2 về gần phạm vi 0–1 hơn.

Đường cong tùy chỉnh có tốt hơn việc chỉ dùng các từ khóa đặt tên không?

Không hẳn — năm từ khóa (ease, ease-in, ease-out, ease-in-out, linear) đáp ứng hầu hết nhu cầu hàng ngày và dễ đọc hơn trong mã nguồn. Hãy dùng cubic-bezier() tùy chỉnh khi bạn cần một cảm giác cụ thể mà các từ khóa không cung cấp được, chẳng hạn như nảy, một cú chốt sắc nét hơn, hoặc khớp với đặc tả chuyển động của một hệ thống thiết kế cụ thể.