🎬 Công Cụ Tạo Keyframe CSS

Giới thiệu

Công Cụ Tạo Keyframe CSS giúp bạn tạo hoạt ảnh @keyframes mà không cần tự viết một dòng code nào. Bạn định nghĩa các thuộc tính transform — translate (X và Y), scale và rotate — cùng opacity tại ba điểm dừng chính: 0%, 50% và 100%. Thời lượng hoạt ảnh, hàm timing (ease, linear, ease-in, ease-out, ease-in-out hoặc cubic-bezier tùy chỉnh) và số lần lặp (hữu hạn hoặc infinite) đều có thể cấu hình trong bảng điều khiển. Bản xem trước hoạt ảnh trực tiếp cập nhật ngay lập tức để bạn điều chỉnh giá trị cho đến khi chuyển động cảm thấy đúng. Khi sẵn sàng, nhấp Sao chép và toàn bộ khối @keyframes — bao gồm cả thuộc tính animation viết tắt — sẽ được đặt vào clipboard, sẵn sàng dán vào stylesheet. Mọi thứ chạy trong trình duyệt, không tải file lên và không gửi dữ liệu đi bất kỳ đâu.

Cách sử dụng

1. Đặt các giá trị transform — translate X/Y, scale và rotate — và opacity cho điểm dừng 0% (điểm bắt đầu của hoạt ảnh).
2. Điều chỉnh các giá trị tại điểm dừng 50% để xác định điểm giữa của chuyển động, hoặc để nguyên giá trị mặc định để tạo hiệu ứng chuyển đổi hai trạng thái đơn giản.
3. Đặt các giá trị điểm dừng 100% cho trạng thái kết thúc, sau đó cấu hình thời lượng (tính bằng giây), hàm timing và số lần lặp.
4. Xem bản xem trước trực tiếp cập nhật theo thời gian thực và tinh chỉnh bất kỳ giá trị nào cho đến khi hoạt ảnh trông đúng như mong muốn.
5. Nhấp Sao chép CSS để sao chép toàn bộ khối @keyframes và thuộc tính animation vào clipboard, sau đó dán trực tiếp vào stylesheet của bạn.

Câu hỏi thường gặp

Tôi có thể tạo hoạt ảnh cho những thuộc tính transform nào?

Bạn có thể tạo hoạt ảnh cho translateX, translateY, scale và rotate, cùng với opacity. Mỗi thuộc tính được đặt độc lập tại các điểm dừng keyframe 0%, 50% và 100%.

Những hàm timing nào có sẵn?

Công cụ bao gồm các preset ease, linear, ease-in, ease-out và ease-in-out, cùng với tùy chọn cubic-bezier tùy chỉnh để bạn có thể tạo đường cong gia tốc độc đáo.

Tôi có thể làm cho hoạt ảnh lặp mãi mãi không?

Có. Đặt số lần lặp thành Infinite và CSS được tạo sẽ sử dụng animation-iteration-count: infinite, khiến hoạt ảnh lặp liên tục.

Tôi có cần biết CSS để sử dụng công cụ này không?

Không. Công cụ hoàn toàn trực quan — chỉ cần di chuyển thanh trượt và chọn giá trị từ menu thả xuống. CSS được tạo tự động và sẵn sàng để sao chép vào bất kỳ dự án nào.

CSS được tạo có tương thích với tất cả các trình duyệt hiện đại không?

Có. Đầu ra sử dụng @keyframes tiêu chuẩn và thuộc tính animation viết tắt, được hỗ trợ trong tất cả các trình duyệt hiện đại bao gồm Chrome, Firefox, Safari và Edge mà không cần bất kỳ tiền tố nhà cung cấp nào.