Cách dùng Trình tạo animation CSS
- Chọn một mẫu — di chuột qua ô để 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 (load, hover, click, scroll).
- 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.
- Tua, giảm tốc độ hoặc bật onion skin để tinh chỉnh, sau đó sao chép CSS, Tailwind hoặc HTML.
Bạn có thể tạo gì
- Timeline keyframe — thêm bao nhiêu keyframe tùy ý, kéo chúng đến các phần trăm mới và đặt easing riêng cho từng cái.
- 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. Các giá trị còn thiếu sẽ được nội suy, nên transform không bao giờ bị giật.
- Kích hoạt — khi tải trang, khi di chuột, khi nhấp, khi cuộn tới khung nhìn, hoặc animation theo cuộn chỉ dùng CSS.
- Stagger — cho một danh sách chạy lần lượt từng phần tử chỉ với một CSS custom property.
- Kiểm tra — tạm dừng, tua 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 shorthand hoặc longhand, HTML, JavaScript, Tailwind v3 và v4, mixin SCSS, file demo độc lập hoặc liên kết chia sẻ.
Shorthand của animation
| Thành phần | Ví dụ | Ý nghĩa |
|---|---|---|
| tên | fade-in-up | Quy tắc @keyframes sẽ chạy |
| thời lượng | 0.6s | Độ dài của một chu kỳ |
| hàm thời gian | cubic-bezier(.33,1,.68,1) | Đường cong tốc độ giữa các keyframe |
| độ trễ | 0.2s | Chờ trước khi bắt đầu; giá trị âm sẽ bắt đầu từ giữa chừng |
| số lần lặp | infinite | Số chu kỳ chạy |
| chiều | alternate | Chạy ngược ở mỗi chu kỳ xen kẽ |
| chế độ fill | both | Giữ khung đầu trước khi chạy và khung cuối sau khi chạy |
Khả năng truy cập
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 khách 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 ở mức nhẹ nhàng hoặc cho người dùng cách tạm dừng chúng.
Mẹo hiệu năng
Hãy animate transform và opacity thay vì top, left, width hay margin, vì những 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 chạy animation. 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 animation css, css animation generator, keyframe css, hiệu ứng css, animate css online, tạo hiệu ứng css, keyframes css online.
Các công cụ dùng kèm tốt với Trình tạo animation CSS
- Trình tạo CSS Keyframes — Trình chỉnh sửa trực quan cho @keyframes.
- 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?
Có. Mọi mẫu đều được viết riêng cho công cụ này và kết quả là CSS thuần, không cần thư viện, giấy phép hay ghi nguồn.
Tôi có thể chỉnh sửa một animation đã có không?
Có. Mở Nhập @keyframes có sẵn, dán CSS của bạn và nó sẽ được chuyển thành keyframe có thể chỉnh sửa. Hỗ trợ opacity, transform (translate, rotate, rotateX/Y, scale, skew), blur, màu nền, border radius và bóng glow.
Làm sao để bắt đầu animation khi phần tử cuộn vào khung nhìn?
Chọn trigger Khi cuộn tới khung nhìn để dùng một đoạn script IntersectionObserver nhỏ, chạy được trên mọi trình duyệt, hoặc Theo cuộn (chỉ CSS) để dùng
animation-timeline: view() mà không cần JavaScript trên các trình duyệt hỗ trợ.Công cụ có hoạt động với Tailwind CSS không?
Có. Các tab Tailwind cung cấp khối
tailwind.config.js cho v3 và khối @theme cho v4, nên bạn có thể dùng animation như một class animate-*.Thuộc tính nào tốt nhất cho animation mượt?
transform và opacity chạy trên bộ compositor 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, nên hãy dùng tiết kiệm trên các phần tử lớn.Tôi có thể cài Trình tạo animation CSS như một ứng dụng web và dùng khi không có mạng không?
Có. Trình tạo animation CSS là một ứng dụng web (PWA) có thể cài đặt — cài trực tiếp từ trình duyệt, không cần tải từ cửa hàng ứng dụng. Trên Chrome hoặc Edge (Windows, macOS, Linux, ChromeOS) hoặc Android, bấm Cài đặt ứng dụng ở đầu trang này; trên iPhone và iPad, dùng Chia sẻ → Thêm vào Màn hình chính; trên Mac, dùng File → Add to Dock trong Safari 17 trở lên. Sau đó ứng dụng mở trong cửa sổ riêng với biểu tượng riêng, và vì chạy hoàn toàn trên trình duyệt nên vẫn hoạt động khi không có mạng. Firefox trên máy tính không thể cài ứng dụng web. Cách cài đặt hoạt động thế nào.