Trở về/CSS Animation Generator

CSS Animation Generator

Xem trước

Fade In

600ms · ease · ×1

CSS Animation Generator —
Cách sử dụng Tạo CSS Animation

CSS Animation Generator giúp bạn tạo và tùy chỉnh CSS keyframe animations. Chọn animation preset, chỉnh duration, timing function, delay và copy CSS @keyframes ngay.

Vì sao dùng CSS Animation?

Performance tốt

CSS animations được browser optimize, chạy trên GPU giúp smooth 60fps.

Không cần JavaScript

Micro-interactions và transitions cơ bản không cần JS library.

Dễ customize

Điều chỉnh timing, delay, iteration count và direction dễ dàng.

Accessibility

Hỗ trợ prefers-reduced-motion để tắt animation cho người dùng nhạy cảm.

Cách tạo CSS Animation

Chọn animation preset

Chọn từ các animation phổ biến: fade, slide, bounce, spin, shake.

Chỉnh Duration

Thời gian của một chu kỳ animation (ms).

Chọn Timing Function

ease, ease-in, ease-out, linear — kiểm soát tốc độ thay đổi.

Export @keyframes

Copy CSS bao gồm @keyframes và animation property.

Các thuộc tính CSS Animation

animation-duration

Thời gian một chu kỳ animation. Ví dụ: 0.3s, 1s, 500ms.

animation-timing-function

animation-delay

Thời gian chờ trước khi animation bắt đầu.

animation-iteration-count

Số lần lặp: 1, 2, 3, infinite.

animation-fill-mode

forwards | backwards — trạng thái element trước/sau animation.

Lợi ích dùng CSS Animation Generator

UI Developer

Prototype animation nhanh mà không cần setup Framer Motion hay GSAP.

Designer

Giao tiếp animation specs với developer bằng CSS chính xác.

Học viên