CSS Animation Generator

Tạo CSS animation với preview trực tiếp

Cấu hình Animation

Tên animation

Preset

Duration: 1s

Delay: 0s

Timing Function

Iteration Count

Direction

Fill Mode

Preview

CSS Code

@keyframes myAnimation {
  from { opacity: 0; } to { opacity: 1; }
}

.myAnimation {
  animation-name: myAnimation;
  animation-duration: 1s;
  animation-delay: 0s;
  animation-timing-function: ease;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: none;
}

/* Shorthand */
.myAnimation-short {
  animation: myAnimation 1s ease 0s 1 normal none;
}

CSS Animation Generator - Tạo Animation CSS Online Miễn Phí

Công cụ tạo CSS animation với preview trực tiếp. 15+ preset animations: Fade, Slide, Zoom, Bounce, Shake, Pulse, Rotate, Flip, Swing. Tùy chỉnh duration, delay, timing function, iteration, direction, fill-mode. Copy @keyframes và CSS code sẵn sàng dùng.

Tính năng nổi bật

15+ preset animations phổ biến

Fade In/Out, Slide từ 4 hướng

Zoom In/Out, Bounce, Shake, Pulse

Rotate, Flip X/Y, Swing

Preview animation trực tiếp

Tùy chỉnh duration (0.1s - 5s)

Tùy chỉnh delay, timing function

Iteration count: 1, 2, 3, infinite

Direction: normal, reverse, alternate

Fill-mode: none, forwards, backwards, both

Copy @keyframes và shorthand CSS

CSS Animation là gì và khi nào nên dùng?

CSS Animation cho phép tạo hiệu ứng chuyển động mượt mà cho HTML elements mà không cần JavaScript. So với JS animations, CSS animations được tối ưu bởi browser, chạy trên GPU, và mượt hơn đặc biệt trên mobile. Sử dụng cho: loading spinners, hover effects, page transitions, attention-grabbing elements, micro-interactions. Công cụ này giúp bạn tạo animation nhanh chóng mà không cần viết @keyframes thủ công.

Lợi ích khi sử dụng

•Tạo animation trong vài giây
•Không cần viết @keyframes thủ công
•Preview realtime trước khi copy
•Học CSS animation properties trực quan
•Code sạch, sẵn sàng production

Cách tạo CSS animation

1Đặt tên cho animation (VD: fadeIn, slideUp)
2Chọn preset animation từ dropdown
3Điều chỉnh duration bằng slider
4Tùy chỉnh delay, timing function nếu cần
5Chọn iteration count (1 lần hay infinite)
6Xem preview và điều chỉnh cho đến khi ưng ý
7Copy CSS code và paste vào project

Câu hỏi thường gặp (FAQ)

Animation fill-mode là gì?

Fill-mode xác định style của element trước/sau animation. 'forwards' giữ style ở keyframe cuối sau khi animation kết thúc. 'backwards' áp dụng style ở keyframe đầu trong thời gian delay. 'both' kết hợp cả hai.

Timing function nào nên dùng?

'ease' (mặc định) phù hợp hầu hết trường hợp. 'linear' cho chuyển động đều. 'ease-in-out' cho chuyển động tự nhiên. cubic-bezier cho bounce/elastic effects.

Animation có ảnh hưởng performance không?

CSS animations được tối ưu bởi browser và chạy trên GPU. Tuy nhiên, tránh animate properties gây layout/paint như width, height, top, left. Ưu tiên transform và opacity.

Làm sao trigger animation khi scroll?

Dùng Intersection Observer API trong JavaScript để add class chứa animation khi element vào viewport. Hoặc dùng thư viện như AOS, ScrollReveal.

Animation không chạy trên Safari?

Thêm -webkit- prefix cho @keyframes và animation properties. Công cụ này generate code chuẩn, bạn có thể thêm prefix bằng Autoprefixer.

Từ khóa liên quan

css animation generatorkeyframes generatorcss animation onlinetạo animation csscss transition generatoranimate.css generator

Hợp tác ngay với Tấn Phát Digital

Chúng tôi không chỉ thiết kế website, mà còn giúp doanh nghiệp xây dựng thương hiệu số mạnh mẽ. Cung cấp dịch vụ thiết kế website trọn gói từ thiết kế đến tối ưu SEO. Hãy liên hệ ngay với Tấn Phát Digital để cùng tạo nên những giải pháp công nghệ đột phá, hiệu quả và bền vững cho doanh nghiệp của bạn tại Hồ Chí Minh.