Chuyển đổi màu
Đổi HEX, RGB và HSL cùng độ trong suốt, xem mẫu màu và sao chép giá trị CSS.
Chỉnh đường cong cubic-bezier CSS
Điều chỉnh hai điểm điều khiển, chạy thử hiệu ứng chuyển tiếp và tạo hàm easing cubic-bezier.
X nằm trong 0–1; Y có thể vượt khoảng này. Kéo hoặc dùng phím mũi tên, giữ Shift để tăng bước.
CSS
Giới thiệu công cụ
Điều chỉnh gia tốc hoặc độ vượt điểm đích của chuyển tiếp bằng cách quan sát đường cong.
Cách sử dụng
Chọn mẫu đường cong, kéo điểm điều khiển hoặc nhập X1, Y1, X2, Y2. Có thể dùng phím mũi tên để chỉnh và giữ Shift để tăng bước. Đặt thời lượng xem thử, chủ động phát hoặc dừng chuyển động, rồi sao chép hay tải CSS.
X nằm trong 0–1 và Y trong −2–3, cho phép tạo chuyển động ngược ban đầu hoặc vượt qua điểm kết thúc. Tệp xuất chỉ chứa khai báo easing, không gồm thời lượng xem thử hay toàn bộ hoạt ảnh. Khi hệ thống bật giảm chuyển động, phần chạy thử sẽ không di chuyển nhưng vẫn chỉnh sửa và xuất được.
Câu hỏi thường gặp
Có xuất hoạt ảnh hoàn chỉnh không?
Chỉ xuất transition-timing-function. Thời lượng và thuộc tính chuyển động cần đặt trong CSS của bạn. x từ 0 đến 1; y từ −2 đến 3.
Vì sao bấm phát mà không thấy chuyển động dù đường cong hợp lệ?
Bản xem trước tuân theo thiết lập giảm chuyển động của hệ thống. Khi thiết lập này bật, hoạt ảnh di chuyển không chạy nhưng bạn vẫn sửa và xuất đường cong được. Nếu không bật, hãy kiểm tra thời lượng nằm trong 100–5.000 ms. Thời lượng này chỉ áp dụng cho bản xem trước.
Công cụ liên quan
Mở trong thẻ mới
Bình luận
0