Trình tạo Cubic Bezier CSS

cubic-bezier là gì?

CSS cubic-bezier() định nghĩa một hàm thời gian tùy chỉnh cho các transition và hoạt ảnh CSS. Bốn số kiểm soát hai điểm của một đường cong Bézier, cho phép điều chỉnh chính xác từ ease-in đến các hiệu ứng kiểu nảy.

Đường cong Bézier, dòng dõi toán học

Các đường cong mang tên Pierre Bézier, kỹ sư người Pháp tại Renault đã dùng chúng trong thập niên 1960 để thiết kế những đường mượt cho thân vỏ Renault 16, công bố năm 1968 trong khuôn khổ hệ CAD UNISURF của Renault. Toán học đã được phát triển độc lập vài năm trước đó (1959) bởi Paul de Casteljau tại Citroën, nhưng Citroën giữ công trình của de Casteljau như bí mật thương mại và bản công bố của Bézier trở thành tham chiếu kinh điển. Hai người hội tụ về cùng một họ đường cong đa thức xác định bởi điểm điều khiển, thuật toán de Casteljau để định trị một đường cong Bézier tại một tham số mang tên người tiên phong chưa công bố. Đường cong Bézier bậc ba trở thành nguyên thủy phổ quát của đồ họa vector vì chúng rẻ để định trị (vài phép nhân và cộng), co giãn dễ dàng (toán học bất biến với phép biến đổi affine) và điều khiển cục bộ (di chuyển một điểm điều khiển chỉ thay đổi các đoạn cong gần đó). Adobe PostScript (1984) và PDF, đặc tả SVG (W3C Recommendation tháng 9 năm 2001) và mọi định dạng phông hiện đại đều dùng đường cong Bézier bậc ba làm khối xây dựng các chữ cái, icon và hình minh họa. CSS đã chấp nhận cùng loại đường cong cho việc canh thời gian animation, mượn nguyên thủy toán học chuẩn của thế giới thiết kế thị giác cho trường hợp dùng mới là mô tả chuyển động.

Đặc tả CSS Animation và các hàm canh thời gian

Animation và transition CSS đều dùng cùng họ hàm canh thời gian. Đặc tả CSS Animations Level 1 lần đầu được công bố dạng Working Draft công khai vào tháng 3 năm 2009 (rút từ các triển khai có tiền tố WebKit trước đó) và tiếp tục được W3C CSS Working Group bảo trì. Module CSS Easing Functions Level 1 chính thức hóa cú pháp hàm canh thời gian và hiện là Candidate Recommendation. Năm từ khóa có tên là alias cho các cubic-bezier cụ thể: ease = cubic-bezier(0.25, 0.1, 0.25, 1), mặc định CSS cho transition, khởi đầu nhanh và kết thúc chậm trông tự nhiên cho phần lớn chuyển động UI. ease-in = cubic-bezier(0.42, 0, 1, 1), khởi đầu chậm, tăng tốc đến cuối nhanh. ease-out = cubic-bezier(0, 0, 0.58, 1), khởi đầu nhanh, giảm tốc đến cuối chậm; thường là easing được dùng nhiều nhất cho phần tử UI vào viewport. ease-in-out = cubic-bezier(0.42, 0, 0.58, 1), đường cong S đối xứng, chậm ở cả hai đầu. linear = cubic-bezier(0, 0, 1, 1), không easing, tốc độ không đổi; hiếm khi là lựa chọn đúng cho UI nhưng phù hợp cho animation lặp liên tục như spinner. CSS cũng cung cấp hai tùy chọn canh thời gian không-Bézier: steps(n, jumpterm) cho animation theo bước (frame-by-frame), và linear() (thêm trong CSS Easing Level 2) cho hàm tuyến tính theo từng đoạn xấp xỉ mọi đường cong.

Đường cong easing trong các design system

Các design system lớn công bố đường cong easing có quan điểm rõ rệt thay thế giá trị mặc định của CSS. Google Material Design đặc tả "standard easing" là cubic-bezier(0.4, 0, 0.2, 1), tăng tốc nhanh, giảm tốc chậm, dùng cho phần lớn transition UI trong Android và thư viện Material trên web; "decelerated easing" cubic-bezier(0, 0, 0.2, 1) cho phần tử vào màn hình; "accelerated easing" cubic-bezier(0.4, 0, 1, 1) cho phần tử rời màn hình. Apple Human Interface Guidelines nhấn mạnh animation vật lý lò xo hơn là đường cong Bézier cố định, nhưng UIKit của iOS có một cubic-bezier mặc định khoảng (0.25, 0.1, 0.25, 1) (giống ease trong CSS). Carbon Design System của IBM dùng cubic-bezier(0.5, 0, 0.1, 1) cho danh mục chuyển động productive. Microsoft Fluent, Atlassian, Salesforce Lightning đều đặc tả đường cong riêng của mình. Phương trình easing của Robert Penner (công bố năm 2001 trong khuôn khổ cuốn sách của ông về chuyển động Flash) định nghĩa từ vựng các đường cong có tên mà gần như mọi thư viện animation đều dùng, easeInQuad, easeOutCubic, easeInOutSine, easeInQuart, easeOutBack, easeInOutBounce, easeInElastic. Phần lớn có thể biểu diễn dưới dạng cubic-bezier; biến thể elastic và bounce thì không (chúng đòi hàm nhiều phần theo đoạn vì chúng dao động).

Chọn đường cong đúng theo công dụng

• Phần tử vào viewport (modal hiện ra, thẻ trượt vào, dropdown mở), dùng ease-out hoặc đường cong giảm tốc như Material cubic-bezier(0, 0, 0.2, 1). Phần tử giảm tốc khi tới, cảm giác như nó "đặt vào chỗ".
• Phần tử rời viewport (modal đóng, thẻ trượt ra), dùng ease-in hoặc đường cong tăng tốc. Phần tử tăng tốc khi rời đi, cho cảm giác nó đi với chủ đích.
• Animation liên tục (loader, thanh tiến độ, chuyển động nền), dùng linear. Easing làm chuyển động liên tục giật cục; tốc độ không đổi đọc lên đều.
• Trạng thái hover và nhấn nút, thời lượng ngắn (100-150 ms) với ease-out cho hover-in và ease-in hoặc không easing cho hover-out. Phản hồi của nút phải có cảm giác nhanh nhạy.
• Chuyển động nhấn mạnh cần cá tính (toast thông báo, chỉ báo thành công), dùng đường cong vượt nhẹ như cubic-bezier(0.34, 1.56, 0.64, 1) cho một cú nảy nhẹ phát tín hiệu "vừa có chuyện thú vị" mà không khó chịu.
• Animation dài hơn (trên 500 ms), dùng ease-in-out hoặc đường cong S tương tự. Animation dài với easing một phía cảm giác có khởi đầu hoặc kết thúc sai hình.

Cân nhắc hiệu năng

Hàm canh thời gian cubic-bezier tùy biến về cơ bản không tốn gì lúc thực thi, đường cong là hằng số, trình duyệt biên dịch trước bảng tra cứu một lần, và việc định trị mỗi khung hình là vài phép số thực dấu chấm động. Câu hỏi hiệu năng nằm ở thuộc tính bạn animate, không phải đường cong canh thời gian. Animate transform (translate, scale, rotate) và opacity dùng compositing GPU và mượt 60 hoặc 120 fps cả trên phần cứng tầm trung. Animate top, left, width, height, margin, padding, hoặc bất kỳ thuộc tính nào kích hoạt layout sẽ giật cục trên mọi trang trừ những trang đơn giản nhất vì mỗi khung hình kích hoạt reflow đầy đủ. Danh sách thuộc tính "compositor-friendly" (transform + opacity, cộng filter và một vài cái khác) là tập an toàn thông thường; mọi thứ khác cần test dưới tải trang thật. Thuộc tính CSS will-change báo cho trình duyệt biết một thuộc tính sắp được animate, cho phép nó nâng phần tử trước lên lớp compositing riêng; dùng tiết kiệm vì mỗi will-change dành chỗ trong bộ nhớ GPU.

Trợ năng: prefers-reduced-motion

Một thiểu số đáng kể người dùng, người có rối loạn tiền đình, có rối loạn thiếu chú ý, hoặc đơn giản là sở thích cá nhân, thấy thiết kế chuyển động làm phân tâm hoặc khó chịu rõ rệt. Đặc tả CSS Media Queries Level 5 định nghĩa media feature prefers-reduced-motion, được phơi bày như một thiết lập hệ thống trên macOS (System Settings → Accessibility → Display → Reduce motion), Windows 10+ (Settings → Ease of Access → Display), iOS, Android và phần lớn các desktop Linux chính. Quy ước từ khoảng 2019: bọc mọi animation không thiết yếu trong @media (prefers-reduced-motion: no-preference) { ... } hoặc đảo lại với @media (prefers-reduced-motion: reduce) { transition: none !important; animation: none !important; }. Lựa chọn đường cong cubic-bezier không quan trọng cho việc đó, đặc tả đòi nhà phát triển vô hiệu hóa hoặc rút ngắn đáng kể animation khi người dùng đã bày tỏ sở thích. Tài liệu các design system hiện đại (Material, Atlassian, GOV.UK) đều có hướng dẫn về reduced motion.

Vật lý lò xo, lựa chọn thay thế mới hơn

Hàm canh thời gian cubic-bezier mô tả chuyển động như nội suy thời lượng cố định dọc một đường cong căn bằng tay. Vật lý lò xo mô tả chuyển động như sự ổn định tự nhiên của một dao động điều hòa có giảm chấn: bạn đặc tả khối lượng, độ cứng và hệ số giảm chấn, và animation chạy đến khi lò xo nghỉ. Lò xo cảm giác tự nhiên hơn cho cử chỉ UI có thể bị ngắt vì chúng có quán tính kéo dài qua các lần ngắt, khi nhả một cử chỉ flick giữa chừng, lò xo tiếp tục đến đích trên một đường cong mới thay vì khựng lại. iOS của Apple dùng vật lý lò xo cho phần lớn tương tác native (cú nảy của scroll view ở viền, hiệu ứng dây thun của swipe). React Spring (Paul Henschel), Framer Motion và hàm easing CSS linear() (khi được cho một đường cong lò xo đã lấy mẫu) mang ngữ nghĩa lò xo tới web. Cubic-bezier vẫn là công cụ đúng cho transition UI thời lượng cố định; lò xo là công cụ đúng cho chuyển động dẫn dắt bằng cử chỉ, có thể bị ngắt. Trình chỉnh sửa này tạo cubic-bezier, dạng đúng cho 90% công việc animation UI năm 2026.

Khi nào bạn sẽ với tay tới công cụ này

• Thiết kế một animation mới theo cảm giác. Kéo các điểm điều khiển cho đến khi quả bóng xem trước di chuyển như bạn muốn, rồi sao CSS. Nhanh hơn việc gõ bốn số rồi refresh trang.
• Tái tạo một animation từ sản phẩm khác. Đảo ngược việc canh thời gian của một animation bạn đã thấy ở chỗ khác bằng cách điều chỉnh cho đến khi xem trước khớp với ký ức của bạn.
• Dựng một thư viện chuyển động thương hiệu. Quyết định ba hoặc bốn cubic-bezier cụ thể cho "nhanh", "mượt", "nhấn mạnh", "nảy" và áp dụng nhất quán xuyên suốt sản phẩm.
• Soát một spec animation từ designer. Dán giá trị cubic-bezier từ một spec chuyển động Figma, xem đường cong có tạo ra chuyển động designer mô tả không.
• Chuyển giao designer sang kỹ sư. Designer sàng lọc ra đúng đường cong trong công cụ này, sao CSS, dán vào tin nhắn Slack, tín hiệu cao hơn nhiều so với một câu mơ hồ "làm cho nó nảy hơn".

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

Các giá trị đại diện cho gì?

Các giá trị (x1, y1, x2, y2) xác định hai điểm điều khiển. Các giá trị X phải nằm trong khoảng từ 0 đến 1 (thời gian), trong khi các giá trị Y có thể vượt quá phạm vi này cho các hiệu ứng vượt quá hoặc nảy.

Easing CSS mặc định là gì?

Cho transition CSS (transition: opacity 300ms;) mặc định là ease, tương đương cubic-bezier(0.25, 0.1, 0.25, 1), khởi đầu nhanh, kết thúc chậm. Cho animation CSS (animation: foo 1s;) mặc định cũng là ease. Hãy ghi đè bằng transition-timing-function hoặc animation-timing-function. Cho phần lớn chuyển động UI, biến thể ease-out hoặc đường cong giảm tốc kiểu Material cho cảm giác tốt hơn mặc định.

Làm hiệu ứng nảy hoặc vượt thế nào?

Đẩy y2 lên trên 1 (giá trị thường gặp 1,2-1,6) để đường cong vượt nhẹ qua đích trước khi ổn định. Một cú nảy nhẹ thường thấy là cubic-bezier(0.34, 1.56, 0.64, 1). Cho cú nảy rõ rệt bạn sẽ cần vật lý lò xo hoặc animation nhiều keyframe thay vì một cubic-bezier, đường cong Bézier chỉ có thể có một đỉnh, nên nảy thực sự (nhiều dao động) đòi hỏi keyframe ở các bước trung gian.

Đường cong tùy biến có chậm hơn từ khóa có tên không?

Không, các từ khóa có tên là alias cho cubic-bezier cụ thể, được định trị bởi cùng đường code. Hiệu năng phụ thuộc thuộc tính bạn animate (transform/opacity = compositing GPU và nhanh; thuộc tính ảnh hưởng layout như top/left/width = chậm vì reflow), không phải đường cong canh thời gian. Chi phí định trị cubic-bezier không đáng kể.

Công cụ này có hoạt động offline không?

Có, canvas đường cong, animation quả bóng xem trước và sinh code CSS đều chạy hoàn toàn trong trình duyệt qua JavaScript. Không có cuộc gọi mạng nào trong khi dùng. Hãy đặt trang offline (chế độ máy bay) sau khi đã tải xong và trình chỉnh sửa vẫn hoạt động. Không có telemetry; các giá trị đường cong bạn dừng lại không bao giờ rời khỏi thiết bị của bạn.

Công cụ liên quan