Cách dùng Trình tạo CSS Keyframes
- Chọn một preset (di chuột vào ô để xem trước) hoặc bắt đầu từ một keyframe trống.
- Đặt thời lượng, độ trễ, số lần lặp, easing và cách kích hoạt (tải trang, di chuột, nhấp, cuộn).
- Chỉnh keyframe trên timeline: nhấp để thêm, kéo để di chuyển, rồi điều chỉnh thuộc tính bằng thanh trượt.
- Kéo thanh thời gian, giảm tốc độ hoặc bật onion skin để tinh chỉnh, sau đó sao chép CSS, Tailwind hoặc HTML.
@keyframes hoạt động như thế nào
Quy tắc @keyframes liệt kê các kiểu mà phần tử nên có tại từng điểm trong animation, viết dưới dạng phần trăm (from là 0%, to là 100%). Trình duyệt tự nội suy mọi giá trị ở giữa. Các keyframe có cùng kiểu có thể dùng chung một selector, chẳng hạn 0%, 100% { … }, và mỗi keyframe có thể đặt animation-timing-function riêng cho đoạn đi sau nó.
Bạn có thể tạo gì
- Timeline keyframe — thêm bao nhiêu keyframe tùy ý, kéo đến các phần trăm mới và đặt easing riêng cho từng keyframe.
- Thuộc tính — translate X/Y, rotate, rotate 3D X/Y, scale, skew, opacity, blur, glow (box-shadow), màu nền và border radius. Giá trị còn thiếu sẽ được nội suy nên transform không bị giật.
- Kích hoạt — khi tải trang, khi di chuột, khi nhấp, khi cuộn tới vùng nhìn thấy, hoặc animation theo cuộn chỉ dùng CSS.
- Stagger — chạy animation cho một danh sách lần lượt từng mục bằng một CSS custom property.
- Kiểm tra — tạm dừng, kéo từng khung hình, giảm xuống ¼ tốc độ và bật onion skin để thấy mọi keyframe cùng lúc.
- Xuất — CSS dạng shorthand hoặc longhand, HTML, JavaScript, Tailwind v3 và v4, mixin SCSS, file demo độc lập hoặc link chia sẻ.
Cú pháp shorthand của animation
| Thành phần | Ví dụ | Ý nghĩa |
|---|---|---|
| name | fade-in-up | Quy tắc @keyframes sẽ chạy |
| duration | 0.6s | Độ dài của một chu kỳ |
| timing function | cubic-bezier(.33,1,.68,1) | Đường cong tốc độ giữa các keyframe |
| delay | 0.2s | Chờ trước khi bắt đầu; giá trị âm sẽ bắt đầu từ giữa chừng |
| iteration count | infinite | Số chu kỳ lặp lại |
| direction | alternate | Chạy ngược ở mỗi chu kỳ xen kẽ |
| fill mode | both | Giữ khung đầu trước khi chạy và khung cuối sau khi chạy |
Trợ năng
Một số người bị chóng mặt hoặc buồn nôn khi thấy chuyển động. Khi bật Tôn trọng prefers-reduced-motion, CSS sẽ tắt animation với những người truy cập đã bật “giảm chuyển động” trong hệ điều hành. Tránh nhấp nháy quá ba lần mỗi giây, và giữ các animation lặp lại ở mức nhẹ nhàng hoặc cho người dùng cách tạm dừng chúng.
Mẹo tối ưu hiệu năng
Hãy animate transform và opacity thay vì top, left, width hoặc margin, vì các thuộc tính này buộc trình duyệt tính lại layout ở mỗi khung hình. Chỉ thêm will-change cho các phần tử sắp được animate. Tinh chỉnh easing bằng trình tạo cubic-bezier, thêm vòng xoay từ trình tạo CSS loader, và kết hợp animation với box shadow hoặc gradient.
Cũng được tìm dưới tên: tạo css keyframes, trình tạo keyframes css, css keyframes generator, tạo animation css, trình chỉnh sửa keyframe css, @keyframes generator, css keyframe editor.
Các công cụ dùng kèm tốt với Trình tạo CSS Keyframes
- Trình tạo animation CSS — Thiết kế animation CSS trên timeline keyframe thực tế.
- Tạo hiệu ứng hover CSS — Thiết kế animation hover cho nút, thẻ, liên kết và icon.
- Máy tính CSS clamp() — Nhập kích thước tối thiểu, tối đa và dải chiều rộng viewport — bạn sẽ nhận được giá trị clamp() thân thiện với phóng to, kèm giải thích công thức, xem trước trực tiếp và thang chữ hoặc thang khoảng cách linh hoạt hoàn chỉnh.
- Chuyển đổi PX sang REM — Chuyển đổi qua lại giữa pixel, rem và em với kích thước font gốc của riêng bạn, hoặc dán cả một stylesheet và chuyển đổi mọi giá trị px chỉ trong một lần.
Câu hỏi thường gặp
CSS được tạo ra có miễn phí để sử dụng không?
Tôi có thể chỉnh sửa animation đã có không?
Làm sao để animation chạy khi phần tử cuộn vào vùng nhìn thấy?
animation-timeline: view() mà không cần JavaScript trên các trình duyệt hỗ trợ.Có dùng được với Tailwind CSS không?
tailwind.config.js với v3 và khối @theme với v4, nhờ đó bạn có thể dùng animation như một class animate-*.Thuộc tính nào tốt nhất để animation mượt?
transform và opacity được xử lý bởi compositor trên GPU nên vẫn mượt cả trên điện thoại chậm. Blur, bóng, màu và border radius tốn tài nguyên hơn, vì vậy hãy dùng tiết kiệm trên các phần tử lớn.