Công cụ tạo CSS Animation
Tạo animation CSS @keyframes từ mẫu có sẵn hoặc keyframe của bạn, đặt thời lượng, độ trễ, số lần lặp, hướng chạy, chế độ fill và đường cong cubic-bezier.
Mẫu có sẵn
Keyframe
Mỗi dòng một quy tắc, ví dụ 50% { transform: scale(1.2); }. Bạn có thể sửa tự do; phần xem trước cập nhật ngay.
Thời gian
Xem trước
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-30px); }
60% { transform: translateY(-15px); }
}
.animated {
animation: bounce 1s ease 0s infinite normal both;
}
@media (prefers-reduced-motion: reduce) {
.animated {
animation: none;
}
}Công cụ Liên quan
Xem Tất cảTạo CSS Animation là gì?
Dựng một animation CSS hoàn chỉnh: rule @keyframes, dạng viết tắt animation và phần ghi đè prefers-reduced-motion tùy chọn. Bắt đầu từ các mẫu như hiện dần, trượt, nảy, nhịp đập, rung lắc, xoay tròn hoặc nhịp tim, tự do chỉnh keyframe và điều chỉnh nhịp độ bằng đường cong cubic-bezier kéo thả được.
Cách sử dụng Tạo CSS Animation
- Chọn một mẫu có sẵn hoặc gõ Keyframe của riêng bạn (mỗi rule một dòng).
- Đặt Tên animation, Thời lượng và Độ trễ.
- Chọn Hướng chạy, Chế độ fill và Lặp vô hạn hoặc Số lần lặp.
- Chọn Hàm thời gian hoặc kéo các tay nắm cubic-bezier / gõ X1, Y1, X2, Y2.
- Bấm Phát lại để xem lần nữa, rồi sao chép mã CSS.
Ví dụ
Mẫu Nhịp đập, 3 lần lặp, hướng alternate, độ trễ 0.5s, cubic-bezier(0.68, -0.6, 0.32, 1.6), tắt giảm chuyển động
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
.animated {
animation: pulse 1s cubic-bezier(0.68, -0.6, 0.32, 1.6) 0.5s 3 alternate both;
} Khi nào nên dùng Tạo CSS Animation
Dùng cho hiệu ứng xuất hiện, biểu tượng tải, gợi ý thu hút sự chú ý và vi tương tác. Với thay đổi trạng thái đơn giản (màu khi hover, kích thước), CSS transition là đủ. Hãy giữ bật tùy chọn giảm chuyển động để người dùng đã yêu cầu hệ điều hành giảm chuyển động không bị ảnh hưởng bởi các chuyển động lớn.
Tạo CSS Animation hoạt động như thế nào
Văn bản keyframe được bọc trong @keyframes name { … } và các thiết lập được viết theo thứ tự viết tắt chuẩn name duration timing-function delay iteration-count direction fill-mode. Trình chỉnh bezier giới hạn giá trị X trong 0–1 (như CSS yêu cầu) còn Y có thể vượt ra ngoài để tạo hiệu ứng nảy; khi bốn giá trị trùng với một từ khóa CSS (ease, linear, ease-in, ease-out, ease-in-out), từ khóa đó được viết thay thế. Tên được làm sạch thành định danh CSS hợp lệ. Phần xem trước dùng tên keyframe riêng nên không bao giờ xung đột với animation của chính trang.
Các Trường Hợp Sử Dụng Phổ Biến
- Hoạt ảnh xuất hiện kiểu hiện dần hoặc trượt vào
- Vòng xoay vô hạn và biểu tượng tải nhấp nháy
- Phản hồi rung lắc khi nhập liệu sai
- Chỉ báo cuộn xuống nảy lên
- Easing tùy chỉnh cho chuyển động mang dấu ấn thương hiệu
Câu Hỏi Thường Gặp
Chế độ fill có tác dụng gì?
forwards giữ keyframe cuối sau khi animation kết thúc, backwards áp dụng keyframe đầu trong lúc trễ, both làm cả hai, còn none không làm gì.
Vì sao giá trị X của bezier bị giới hạn trong 0–1?
X biểu diễn thời gian, vốn không thể chạy lùi, nên CSS từ chối giá trị ngoài 0–1. Y biểu diễn tiến trình và có thể vượt ra ngoài để tạo hiệu ứng lấy đà hoặc nảy.
Tùy chọn giảm chuyển động thêm gì?
Một khối @media (prefers-reduced-motion: reduce) đặt animation: none cho người dùng đã bật giảm chuyển động trong hệ điều hành.