Cubic Bezier CSS

cubic-bezier(x1, y1, x2, y2) là một hàm CSS định nghĩa đường cong thời gian tùy chỉnh cho transition và animation. Bốn con số điều khiển hai điểm tay nắm, định hình cách animation tăng tốc và giảm tốc trong suốt thời lượng của nó.

Đó là hai điểm điều khiển: P1 (x1, y1) và P2 (x2, y2). Giá trị X biểu thị thời gian, với 0 là điểm bắt đầu và 1 là điểm kết thúc, và phải nằm trong khoảng 0 đến 1. Giá trị Y biểu thị tiến độ và có thể vượt ra ngoài khoảng 0 đến 1 để tạo vượt mốc.

Đặt một giá trị Y nhỏ hơn 0 hoặc lớn hơn 1. Giá trị dưới 0 khiến chuyển động lùi lại một chút, còn giá trị trên 1 khiến nó vượt quá đích trước khi ổn định, tạo cảm giác nảy hoặc lò xo. Họ mẫu Back được xây dựng trên mẹo này. Trong trình chỉnh sửa này, Y có thể trải từ -0.5 đến 1.5.

Các phương trình easing của Robert Penner là bộ đường cong chuyển động chuẩn được dùng rộng rãi trong animation. Mỗi họ (Sine, Quad, Cubic, Quart, Quint, Expo, Circ, Back) có ba biến thể: In cho khởi đầu chậm, Out cho kết thúc chậm, và InOut cho cả hai. Trình chỉnh sửa này cung cấp các xấp xỉ cubic-bezier của những đường cong đó dưới dạng mẫu có sẵn.

ease-in-out chỉ là một từ khóa đặt tên cho một đường cong cubic-bezier cụ thể (0.42, 0, 0.58, 1) bắt đầu và kết thúc chậm. cubic-bezier() là hàm tổng quát cho phép bạn định nghĩa bất kỳ đường cong nào bạn muốn, gồm cả ease-in-out lẫn vô số đường cong khác mà từ khóa không thể diễn tả. Dùng So sánh để thấy đường cong tùy chỉnh khác linear ra sao.

Sao chép đầu ra và áp dụng giá trị vào transition hoặc animation của bạn, ví dụ transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); hoặc animation: slide-in 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);. Trình chỉnh sửa xuất ra cả thuộc tính timing-function của transition lẫn animation, để bạn thả vào cái nào cũng được.