Tạo Animation CSS — Animation Keyframe Không Cần Code

Animation CSS có thể tạo hiệu ứng chuyển động phức tạp mà không cần JavaScript. Trình tạo của chúng tôi cho phép xây dựng animation keyframe trực quan và tạo code @keyframes dùng ngay lập tức.

Cấu Trúc Animation Keyframe

@keyframes tên { from { ... } to { ... } } cho animation hai trạng thái đơn giản. Dùng phần trăm (0%, 50%, 100%) cho nhiều trạng thái trung gian. Thuộc tính animation kết nối @keyframes với phần tử.

Hàm Easing

ease là mặc định (bắt đầu chậm, tăng tốc, kết thúc chậm). linear là hằng số. ease-in chậm dần ở cuối. ease-out tăng tốc ở đầu. cubic-bezier() tạo đường cong easing tùy chỉnh. Easing đúng làm animation trông thực tế hơn.

Hiệu Suất

Chỉ animate transform và opacity để có GPU acceleration. Tránh animate width, height, margin hay padding — điều này gây tái tính toán layout. Dùng will-change: transform cho animation phức tạp để chuẩn bị GPU.