TL
Tool Lab
💰Donate
💰Donate

CSS Animation Generator

Build CSS keyframe animations with live preview.

Box
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.element {
  animation: fadeIn 1s ease 0s 1 normal both;
}

Giới thiệu công cụ

Trình tạo Hoạt ảnh CSS tạo hoạt ảnh mượt mà bằng cách cấu hình keyframe preset, thời gian, thời lượng, độ trễ và số lần lặp. Xem trước trực tiếp hiển thị hoạt ảnh đang chạy.

Hoạt ảnh CSS sử dụng transform và opacity hiệu quả vì được tổng hợp trên GPU và không kích hoạt layout hay repaint.

Cách sử dụng

  1. Chọn loại hoạt ảnh từ menu thả xuống.
  2. Đặt thời lượng (vd: 0.5s, 2s).
  3. Chọn hàm thời gian để kiểm soát easing.
  4. Tùy chọn đặt độ trễ trước khi hoạt ảnh bắt đầu.
  5. Đặt số lần lặp (số hoặc infinite).
  6. Nhấn Phát lại để xem trước, rồi Sao chép để xuất CSS.

Trường hợp sử dụng

Nhà phát triển front-end dùng hoạt ảnh fade và slide để cải thiện hiệu suất cảm nhận khi tải nội dung. Nhà thiết kế UI tạo nguyên mẫu các tương tác nhỏ như pulse nút và rung thông báo.

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

  • fill-mode: both là gì? — Hoạt ảnh áp dụng kiểu bắt đầu trước khi bắt đầu và giữ kiểu kết thúc sau khi kết thúc. Đây là cài đặt hữu ích nhất.
  • Làm thế nào để hoạt ảnh lặp mãi mãi? — Đặt số lần lặp thành infinite.
  • Hoạt ảnh CSS tốt hơn JavaScript không? — Với hiệu ứng đơn giản, hoạt ảnh CSS được ưu tiên. Với trình tự phức tạp hoặc tương tác, JavaScript cung cấp nhiều kiểm soát hơn.