Trình tạo Hoạt ảnh CSS
Công cụ tạo CSS animation tạo hiệu ứng @keyframes từ 14 mẫu có sẵn như fade in, slide in, bounce in, pulse, spin, shake và zoom, với các tùy chỉnh thời lượng, timing function và số lần lặp.
Về công cụ này
Công cụ tạo CSS animation tạo hiệu ứng @keyframes từ 14 mẫu có sẵn như fade in, slide in, bounce in, pulse, spin, shake và zoom, với các tùy chỉnh thời lượng, timing function và số lần lặp.
Cách sử dụng
- Chọn một mẫu animation.
- Đặt thời lượng, timing function và số lần lặp.
- Bấm Replay để xem trước.
- Bấm Copy CSS để lấy quy tắc @keyframes và animation.
Điều nên biết
- Một CSS animation gồm hai phần: quy tắc @keyframes và thuộc tính animation trên phần tử.
- Tạo chuyển động cho transform và opacity thường là lựa chọn mượt nhất về hiệu năng.
- Các timing function như ease-out bắt đầu nhanh rồi chậm dần, tạo cảm giác tự nhiên cho hiệu ứng xuất hiện.
- Hãy tôn trọng media query prefers-reduced-motion cho người dùng muốn giảm chuyển động.
- Số lần lặp infinite phù hợp với loader; hiệu ứng xuất hiện thường chỉ chạy một lần.
Chạy hoàn toàn trong trình duyệt của bạn — không có dữ liệu nào bạn nhập được tải lên hay lưu lại.
Câu hỏi thường gặp
Làm sao để tạo CSS animation?
Định nghĩa chuyển động trong quy tắc @keyframes, rồi gắn nó bằng animation: name duration timing iteration. Công cụ sẽ viết cả hai giúp bạn.
CSS transition và animation khác nhau thế nào?
Transition tạo chuyển động giữa hai trạng thái khi thuộc tính thay đổi, chẳng hạn khi hover. Animation dùng keyframes, có thể tự chạy và lặp lại.
Làm sao để animation lặp vô hạn?
Đặt số lần lặp là infinite, ví dụ animation: spin 1s linear infinite.
CSS animation có ảnh hưởng đến khả năng tiếp cận không?
Chuyển động lớn hoặc liên tục có thể gây khó chịu cho một số người dùng. Hãy đặt các animation không thiết yếu trong @media (prefers-reduced-motion: no-preference).