Làm thế nào để tạo một đường cong easing cubic-bezier tùy chỉnh cho CSS?

Kéo hai điểm điều khiển trên biểu đồ, nhập giá trị chính xác x1, y1, x2, y2, hoặc chọn một cài đặt sẵn. Sau đó chọn CSS trong Định dạng đầu ra và nhấp vào Sao chép để lấy giá trị cubic-bezier() cho transition-timing-function.

Làm thế nào để tạo hiệu ứng nảy hoặc vọt lố với cubic-bezier?

Kéo một điểm điều khiển lên trên hoặc xuống dưới khung sao cho giá trị Y của nó vượt quá 0-1. Y có thể vượt quá phạm vi đó, trong khi X nằm trong khoảng từ 0 đến 1. Các cài đặt sẵn back-out và anticipate là những điểm khởi đầu có sẵn cho hiệu ứng vọt lố.

Tôi có thể lấy easing cho Tailwind, Framer Motion hoặc anime.js không?

Có. Các tab định dạng đầu ra là CSS, Tailwind, Framer Motion và anime.js. Tất cả đều định dạng cùng bốn con số, vì vậy hãy chọn một tab và nhấp vào Sao chép để đưa đoạn mã vào khay nhớ tạm của bạn.

Làm thế nào để tải một giá trị cubic-bezier hiện có để chỉnh sửa?

Dán một giá trị như cubic-bezier(.17, .67, .83, .67) vào hộp nhập và nhấp vào Tải. Nếu không thể đọc được bốn số, bạn sẽ nhận được thông báo lỗi. Đường cong cũng được lưu trữ trong URL trang sau dấu thăng, vì vậy nó có thể được chia sẻ.

Tại sao bản xem trước có cảm giác chậm hơn so với chuyển động thực tế của tôi?

Xem trước chuyển động sử dụng cài đặt Thời lượng mà bạn có thể thay đổi, và mặc định chậm hơn để bạn có thể nghiên cứu đường cong. Hãy rút ngắn Thời lượng, sau đó dùng nút Phát lại để xem chuyển động ở tốc độ bạn dự định sử dụng.

Có thật sự miễn phí không?

Có. Mọi công cụ đều miễn phí sử dụng, không cần tài khoản hay thẻ tín dụng. Công việc được thực hiện trên thiết bị của bạn thay vì máy chủ của chúng tôi, đó là điều giúp công cụ luôn miễn phí.

Có hoạt động trên di động không?

Có. Công cụ chạy trên các trình duyệt di động hiện nay của iOS và Android, không cần cài đặt gì.

📈

Tạo CSS Cubic-Bezier Easing miễn phí

Thiết kế đường cong CSS easing bằng cách kéo các điểm kiểm soát, xem trước chuyển động trực tiếp và sao chép giá trị cubic-bezier(). Bao gồm cài đặt sẵn overshoot/bounce.

Chạy trên trình duyệtKhông đăng ký, không pop-upKhông cần đăng nhậpMiễn phí mãi mãi

Hoạt động ngoại tuyến sau khi tải

Kéo các tay cầm xanh ngọc & hồng để định hình đường cong

Điểm kiểm soát

x1y1x2y2

Xem trước chuyển động

Thời lượng1,6 giây

Chuyển đổi chiều rộng

Giá trị CSS

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

Mẫu có sẵn

Tay cầm hồng và xanh ngọc có thể kéo lên trên hoặc xuống dưới hộp (Y vượt 0-1) để tạo hiệu ứng 'overshoot' / nảy như back-out và anticipate. X giữ trong 0-1 (thời gian không thể đảo ngược).

Công dụng phổ biến

Chuyển Đổi CSS Tùy Chỉnh EasingThiết kế easing tự nhiên cho các hiệu ứng hover, menu và chuyển đổi UI.
Hoạt Hình Nảy và Vượt QuáTạo chuyển động lò xo/nảy vui nhộn bằng cách kéo các điểm điều khiển vượt quá hộp.
Easing cho Hoạt Hình @keyframesChọn animation-timing-function phù hợp cho hoạt hình CSS keyframe.
Giá Trị Easing cho Thư Viện Hoạt Hình JSNhận giá trị cubic-bezier cho GSAP, Framer Motion, anime.js và hơn thế nữa.
Hiểu Cách Hoạt Động EasingXem mối quan hệ giữa đường cong bezier và chuyển động mà nó tạo ra.

Cách hoạt động

Trình chỉnh sửa được xây dựng hoàn toàn trong trình duyệt bằng React state và SVG — không có thư viện nào xử lý phép tính đường cong. Hai điểm điều khiển có thể kéo định nghĩa một đường Bezier bậc ba SVG, và chính bộ máy hoạt ảnh CSS của trình duyệt chạy bản xem trước chuyển động bằng cách chèn giá trị cubic-bezier() thu được trực tiếp vào quy tắc @keyframes.

1
Kéo hoặc nhập điểm điều khiển
Hai tay nắm (P1 màu xanh ngọc, P2 màu hồng) nằm trên canvas SVG. Kéo dùng Pointer Events API với setPointerCapture để tay nắm bám theo ngón tay hoặc con trỏ ngay cả ngoài ranh giới SVG. Bạn cũng có thể dịch tay nắm bằng phím mũi tên hoặc nhập giá trị chính xác vào các ô số x1/y1/x2/y2.
2
SVG vẽ đường cong theo thời gian thực
Đường cong là một phần tử SVG <path> duy nhất có lệnh C (Bezier bậc ba) được tính lại từ tọa độ bốn điểm điều khiển mỗi khi state cập nhật. Không canvas, không thư viện bên ngoài — bộ hiển thị SVG của trình duyệt vẽ đường trực tiếp.
3
Bộ máy CSS của trình duyệt xem trước hàm gia tốc
Ba hoạt ảnh trực tiếp (chấm trượt, chuyển đổi chiều rộng và co giãn) chạy CSS @keyframes với giá trị cubic-bezier() được chèn nội tuyến. Chính bộ máy hoạt ảnh của trình duyệt diễn giải đường cong, nên những gì bạn thấy chính xác là những gì CSS thực tế của bạn sẽ tạo ra.
4
Sao chép đoạn mã theo cú pháp framework của bạn
Các thẻ định dạng cùng bốn con số thành CSS transition-timing-function, lớp giá trị tùy ý của Tailwind, mảng ease của Framer Motion hoặc chuỗi easing của anime.js. Đoạn mã được ghi vào bộ nhớ tạm bằng navigator.clipboard. Đường cong cũng được mã hóa trong hash URL (#b=x1,y1,x2,y2) để bạn chia sẻ hoặc đánh dấu.