Trình chỉnh sửa gia tốc Cubic-Bézier
Thiết kế các đường cong gia tốc cubic-bezier tùy chỉnh với trình chỉnh sửa kéo thả và xem trước hoạt ảnh trực tiếp.
Kéo hai tay cầm để định hình đường cong gia tốc.
transition-timing-function: —;
animation-timing-function: —;
Mọi thứ chạy trong trình duyệt của bạn — không có gì được tải lên.
Giới thiệu về Trình chỉnh sửa gia tốc Cubic-Bézier
Trình soạn thảo easing Cubic-Bézier thiết kế các hàm định thời tùy chỉnh cho các hiệu ứng chuyển tiếp và hoạt ảnh CSS. Kéo hai điểm điều khiển trên khung vẽ đường cong và giá trị cubic-bezier(x1, y1, x2, y2) cập nhật trực tiếp; một bản xem trước hoạt ảnh phát easing bên cạnh một tham chiếu tuyến tính để bạn cảm nhận sự khác biệt, với thời lượng có thể điều chỉnh và phát lại tức thì.
Mười mẫu dựng sẵn bao phủ vốn từ vựng thông thường — ease chuẩn, ease-in, ease-out và ease-in-out, cộng với các đường cong biểu cảm như back và anticipate vượt quá điểm cuối của chúng, và các đường tăng tốc, giảm tốc kiểu material. Dùng chúng nguyên bản hoặc làm điểm khởi đầu để kéo thành thứ của riêng bạn.
Bạn cũng có thể gõ tọa độ điểm điều khiển chính xác, nhấn ngẫu nhiên để lấy cảm hứng, và sao chép giá trị cubic-bezier() trần hoặc một quy tắc CSS sẵn sàng để dán. Toàn bộ trình soạn thảo chạy trong trình duyệt của bạn.
Cách sử dụng Trình chỉnh sửa gia tốc Cubic-Bézier
- Kéo hai điểm điều khiển trên trình soạn thảo đường cong để tạo hình easing.
- Nhấp Phát lại và so sánh hoạt ảnh easing với tham chiếu tuyến tính, điều chỉnh thời lượng nếu cần.
- Thử các mẫu dựng sẵn — ease, back, anticipate, material và nhiều hơn — để có điểm khởi đầu nhanh.
- Tinh chỉnh bằng các đầu vào điểm điều khiển dạng số để có giá trị chính xác.
- Sao chép giá trị cubic-bezier() hoặc đoạn mã CSS hoàn chỉnh.