Preparing your comprehensive developer toolkit
Hướng dẫn thực tế
Trình biên tập animation CSS trực quan: quản lý keyframe, chỉnh cubic-bezier, xem Xem trước realtime và xuất @keyframes sẵn dùng.
Animation CSS cho phép phần tử thay đổi phong cách dần dần mà không cần JavaScript. Quy tắc @keyframes định nghĩa chuỗi animation với các bước trung gian (keyframe) tại các phần trăm thời gian (0%, 50%, 100%). Thuộc tính animation điều khiển thời gian (duration, delay), số lần lặp (iteration-count), hướng chạy (normal, reverse, alternate) và easing (timing-function). Transition CSS dùng khi chỉ cần chuyển trạng thái đơn giản. Animation giúp cải thiện trải nghiệm người dùng, tạo phản hồi, dẫn hướng chú ý và vẫn tận dụng tăng tốc phần cứng để hiển thị mượt.
@keyframes định nghĩa chuỗi animation bằng cách chỉ định style tại các mốc. Cú pháp: @keyframes Tên { 0% {...} 50% {...} 100% {...} }. Có thể dùng from/to. Một keyframe thay đổi nhiều thuộc tính cùng lúc. Đặt tiền tố (-webkit-) cho trình duyệt cũ.
animation là shorthand gồm: animation-Tên, duration, timing-function, delay, iteration-count, direction, fill-mode, Phát-state. Có thể viết dạng đầy đủ hoặc shorthand `animation: Tên duration timing-function ...`. Nhiều animation được phân tách bằng dấu phẩy.
Điều khiển nhịp animation bằng các đường cong. ease: chậm-đầu/cuối, linear: tốc độ đều, ease-in/out: tăng/giảm tốc. cubic-bezier(x1,y1,x2,y2) tạo đường cong tùy chỉnh; x trong 0–1, y có thể vượt 0–1 để tạo hiệu ứng nảy. Các bước(n,Bắt đầu|end) tạo chuyển bậc thang.
Để đạt 60fps, ưu tiên animate transform (translate, scale, rotate) và opacity vì được GPU tăng tốc. Tránh animate width/height/top/left. Dùng will-change: transform để báo trước. Hạn chế animation đồng thời và độ phức tạp keyframe. Tôn trọng tùy chọn @media (prefers-reduced-motion).
Tạo/chỉnh @keyframes trên timeline. Thêm/xóa keyframe ở bất kỳ phần trăm nào, thiết lập thuộc tính CSS (transform, opacity, color) bằng thao tác kéo thả
Thiết lập thời lượng, delay, số vòng lặp (vô hạn hoặc số cụ thể), hướng chạy, fill mode với xem trước theo thời gian thực
Chọn easing dựng sẵn (ease, linear, ease-in/out) hoặc tự vẽ cubic-bezier bằng trình chỉnh đồ thị. So sánh đường cong và xem Xem trước ngay
Animation mẫu: fade, slide, bounce, rotate, scale, pulse, shake, flip. Tùy biến lại hoặc dùng làm điểm khởi đầu cho animation phức tạp
Công cụ này giúp bạn tạo CSS animations trực quan mà không cần viết code thủ công. Bạn có thể tạo @keyframes animations, cấu hình timing functions, thiết lập thời lượng và độ trễ, và xuất code CSS sẵn sàng sử dụng. Hoàn hảo cho các nhà phát triển web, nhà thiết kế và bất kỳ ai cần thêm animations mượt mà vào trang web của họ.
Chỉ cần cấu hình cài đặt animation của bạn: chọn tên animation, đặt thời lượng, chọn timing function (ease, linear, cubic-bezier), cấu hình độ trễ và số lần lặp, và đặt hướng. Công cụ tạo code CSS đầy đủ bao gồm quy tắc @keyframes và các thuộc tính animation. Bạn có thể xem trước animation và sao chép code bằng một cú nhấp chuột.
Có, CSS animation generator này hoàn toàn miễn phí. Không cần đăng ký, thanh toán hoặc tạo tài khoản. Bạn có thể sử dụng trực tuyến ngay lập tức mà không có hạn chế hoặc giới hạn nào.
Có, công cụ cho phép bạn tạo @keyframes animations tùy chỉnh. Bạn có thể định nghĩa các thuộc tính CSS ở các phần trăm khác nhau (0%, 50%, 100%) bao gồm transform, opacity, color và các thuộc tính có thể animate khác. Code được tạo bao gồm cả định nghĩa @keyframes và các thuộc tính animation để áp dụng nó.
CSS animations được tạo sử dụng cú pháp @keyframes tiêu chuẩn được hỗ trợ bởi tất cả các trình duyệt hiện đại (Chrome, Firefox, Safari, Edge). Đối với trình duyệt cũ hơn, bạn có thể cần thêm các tiền tố nhà cung cấp như @-webkit-keyframes. Công cụ tạo CSS tiêu chuẩn hoạt động với đặc tả animation CSS3.
Để có hiệu suất tốt nhất, hãy animate các thuộc tính transform và opacity vì chúng kích hoạt GPU acceleration. Tránh animate các thuộc tính layout như width, height, margin hoặc padding. Sử dụng will-change: transform để gợi ý cho trình duyệt. Công cụ tạo code được tối ưu hóa, nhưng bạn nên áp dụng các phương pháp hay nhất này khi tùy chỉnh keyframes.
Có, code CSS được tạo đã sẵn sàng cho production. Nó tuân theo cú pháp CSS animation tiêu chuẩn và các phương pháp hay nhất. Chỉ cần sao chép code và dán vào stylesheet của bạn. Bạn có thể muốn điều chỉnh tên animation và tùy chỉnh keyframes để phù hợp với nhu cầu thiết kế cụ thể của bạn.
Hướng dẫn đầy đủ về @keyframes và thuộc tính animation
Trình biên tập đồ thị cubic-bezier trực quan
Thư viện animation CSS với hơn 80 hiệu ứng
Thực hành tốt nhất tối ưu hiệu năng animation CSS
Tham khảo trực quan các loại easing
Mở công cụ để trải nghiệm các tính năng này.