Tạo CSS Animation Online
18 hiệu ứng: fade, slide, bounce, shake, rotate, flip, heartbeat... Xem preview trực quan, copy CSS keyframe ngay.
📖 Hướng Dẫn Sử Dụng
- Chọn hiệu ứng animation từ danh sách bên trái
- Tùy chỉnh thời lượng, delay, số lần lặp và easing
- Nhấn ▶ Chạy Preview để xem hiệu ứng trực tiếp
- Nhấn Copy CSS để copy toàn bộ code dán vào stylesheet
- Hoặc Copy @keyframe nếu chỉ cần phần định nghĩa keyframe
❓ Câu Hỏi Thường Gặp
CSS animation có hỗ trợ trên mobile không?
CSS animation được hỗ trợ tốt trên tất cả thiết bị di động hiện đại (iOS Safari 9+, Android Chrome 4+). Tuy nhiên, để tối ưu hiệu năng, nên ưu tiên dùng transform và opacity vì chúng được GPU xử lý, tránh dùng các thuộc tính thay đổi layout như width, height, margin.
Làm thế nào để animation chỉ chạy 1 lần khi phần tử xuất hiện trong viewport?
Dùng Intersection Observer API để thêm class CSS khi phần tử vào viewport: observer.observe(el) → khi isIntersecting = true thì thêm class có animation. Kết hợp với animation-fill-mode: both để giữ trạng thái cuối của animation.
animation-fill-mode có tác dụng gì?
forwards: giữ nguyên trạng thái cuối animation sau khi kết thúc. backwards: áp dụng trạng thái đầu tiên ngay trong thời gian delay. both: kết hợp cả hai. Đây là giá trị hay dùng nhất để animation trông tự nhiên nhất.