Trình tạo easing CSS
Trình tạo easing CSS trực tuyến miễn phí. Kéo các điểm điều khiển cubic-bezier trên đường cong tương tác, chọn trong 18 mẫu có sẵn, xem bóng lặp lại liên tục và sao chép hàm thời gian ngay.
Hàm easing trong CSS là gì?
Hàm easing điều khiển nhịp tiến của hoạt hình hay chuyển tiếp theo thời gian. Phần tử không bắt buộc di chuyển đều tốc độ: có thể khởi động chậm, tăng tốc, vọt qua mục tiêu rồi ổn định. Trong CSS, nó được đặt qua thuộc tính transition-timing-function hoặc animation-timing-function.
Bốn con số trong cubic-bezier() nghĩa là gì?
cubic-bezier(x1, y1, x2, y2) xác định đường cong qua hai điểm điều khiển. Điểm đầu tạo dáng khởi động của chuyển động, điểm sau tạo dáng kết thúc. X là thời gian trên thang 0 đến 1, còn Y là tiến độ: 0 là giá trị đầu, 1 là giá trị cuối.
Vì sao Y được vượt ngoài 0 đến 1 còn X thì không?
X ánh xạ sang thời gian thực nên giá trị dưới 0 hay trên 1 sẽ phá vỡ quan hệ nhân quả và đặc tả cấm. Y thì tự do: trên 1 là vượt mục tiêu, dưới 0 là lùi lại trước rồi tiến lên — các mẫu Back tạo cảm giác nảy đúng nhờ vậy.
ease, ease-in và ease-out khác nhau thế nào?
ease là giá trị mặc định của trình duyệt với khởi động và hạ cánh nhẹ nhàng; ease-in bắt đầu chậm kết thúc nhanh; ease-out bắt đầu nhanh rồi giảm tốc; ease-in-out kết hợp cả hai. Trình tạo còn có các mẫu sine, quad, cubic, quart, expo, back và material — tổng cộng 18.
Xem trước bằng quả bóng hoạt động ra sao?
Hai quả bóng lặp vòng trong thời lượng bạn đặt. Quả trên luôn chạy theo hàm tuyến tính để đối chiếu, quả dưới chạy theo đường cong của bạn. Khoảng cách giữa chúng co giãn cho thấy chính xác easing thay đổi điều gì.
Dán giá trị đã tạo vào đâu?
Dùng nó làm giá trị transition-timing-function hoặc animation-timing-function, ví dụ transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);. Công cụ xuất thuần hàm cubic-bezier(...) sẵn sàng bỏ vào bất kỳ quy tắc nào.
Hàm easing có ảnh hưởng hiệu năng hoạt hình không?
Bản thân hàm thời gian không tốn kém: nó chỉ ánh xạ lại tiến độ theo thời gian. Hiệu năng phụ thuộc thuộc tính bạn hoạt hình: transform và opacity thân thiện GPU, trong khi hoạt hình các thuộc tính bố cục như width hay top gây reflow tốn kém bất kể easing.
Có tạo được hiệu ứng nảy hay đàn hồi thật không?
Một cubic-bezier chỉ vọt qua mục tiêu một lần, không tạo được các cú nảy liên tiếp của bounce hay đàn hồi thật. Muốn vậy hãy nối nhiều keyframe trong @keyframes hoặc dùng Web Animations API; còn cú vượt mượt một lần đúng là thế mạnh của cubic-bezier và trọng tâm công cụ này.
Những gì tôi làm ở đây có bị tải lên không?
Không. Đường cong được vẽ trên canvas cục bộ và hoạt hình xem trước chạy hoàn toàn trong trình duyệt của bạn. Không có gì gửi lên máy chủ nên trình tạo vẫn dùng được offline sau khi trang tải xong.
Cách sử dụng Trình tạo easing CSS
Khắc họa đường cong easing CSS bằng thị giác thay vì đoán mò con số. Kéo các điểm điều khiển, so chuyển động của bạn với tham chiếu tuyến tính và sao chép cubic-bezier hoàn chỉnh chỉ với một cú nhấp. Mọi thứ chạy cục bộ trong trình duyệt của bạn.
- Chọn một trong 18 cài sẵn làm điểm xuất phát, ví dụ Ease Out, Expo Out hoặc Back Out.
- Kéo hai tay nắm trên đường cong: trục X là thời gian nên phải nằm giữa 0 và 1; trục Y là tiến độ, được phép vượt quá.
- Tinh chỉnh tọa độ chính xác của P1 và P2 bằng các ô nhập số nếu cần độ chính xác.
- Chỉnh thanh trượt thời lượng và theo dõi hai quả bóng lặp lại — quả rỗng luôn tuyến tính, quả đặc dùng đường cong của bạn.
- Sao chép giá trị cubic-bezier đã tạo vào transition-timing-function hoặc animation-timing-function.
Đẩy một tay nắm Y vượt quá 1 để có cú vượt đích tự tin, ví dụ cubic-bezier(0.34, 1.56, 0.64, 1) — khiến nút và thẻ mềm dẻo như lò xo mà không cần keyframe nào.
Công cụ liên quan
- Trình tạo Gradient CSS Tạo gradient CSS tuyệt đẹp trực quan. Tạo gradient tuyến tính, hướng tâm và hình nón với nhiều điểm dừng màu, góc và vị trí tùy chỉnh. Sao chép mã CSS sẵn sàng sản xuất ngay lập tức.
- Trình Tạo Loader CSS Trình tạo loader CSS miễn phí: mười spinner tải trang bằng CSS thuần, điều chỉnh trực tiếp kích thước, tốc độ, độ dày và màu, rồi sao chép HTML và CSS dán ngay được.
- Trình Tạo Bo Góc CSS Trình tạo bo tròn sáng tạo miễn phí trực tuyến. Kéo 8 điểm điều khiển hoặc chọn hình blob có sẵn để tạo hình khối CSS hữu cơ và sao chép mã ngay lập tức.
- Trình chuyển đổi màu Trình chuyển đổi màu trực tuyến miễn phí. Chuyển đổi định dạng HEX, RGB, HSL, HSV ngay lập tức với bộ chọn trực quan. 100% riêng tư, chạy trong trình duyệt của bạn.
- Trình tạo text-shadow CSS Trình tạo text-shadow CSS trực tuyến miễn phí. Xếp nhiều lớp bóng với lệch ngang, làm mờ, màu và độ mờ, thử mẫu Neon, 3D, Retro và sao chép mã CSS ngay.
- Trình tạo clip-path CSS Trình tạo clip-path CSS trực tuyến miễn phí. Thiết kế hình polygon, circle, ellipse và inset với các điểm kéo thả, xem trước trực tiếp và sao chép mã CSS chỉ một cú nhấp.
- Làm đẹp CSS Định dạng và làm đẹp mã CSS ngay lập tức. Chuyển đổi CSS đã nén thành mã dễ đọc với các tùy chọn tùy chỉnh.
- Trình nén CSS Trình nén CSS trực tuyến miễn phí. Nén và tối ưu hóa mã CSS ngay lập tức bằng cách loại bỏ khoảng trắng, nhận xét và ký tự không cần thiết. Giảm kích thước tệp để tăng hiệu suất web.