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.
Features
- Trình chỉnh keyframe trực quan: 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ả
- Kiểm soát thời gian: 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
- Hàm easing: 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
- Thư viện animation: 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
Usage Guide
- Chọn loại: Chọn animation keyframe, transition hoặc áp dụng preset có sẵn
- Cấu hình animation: Thiết lập duration, delay, easing và thêm keyframe với thuộc tính CSS
- Xem trước: Quan sát hiệu ứng trực tiếp và điều chỉnh tham số tức thì
- Xuất CSS: Sao chép đoạn CSS gồm @keyframes và thuộc tính animation
Technical Details
Quy tắc @keyframes
@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ũ.
Nhóm thuộc tính animation
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.
Hàm timing
Đ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.
Frequently Asked Questions
- Công cụ này dùng để làm gì?
- 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ọ.
- Làm thế nào để sử dụng CSS animation generator này?
- 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ông cụ này có miễn phí không?
- 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.
- Tôi có thể tùy chỉnh keyframes trong công cụ này không?
- 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ó.
- Trình duyệt nào hỗ trợ CSS animations được tạo?
- 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.
- Làm thế nào để cải thiện hiệu suất animation?
- Để 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.
- Tôi có thể sử dụng code được tạo trong production không?
- 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.
Related Documentation
- MDN - CSS Animations - Hướng dẫn đầy đủ về @keyframes và thuộc tính animation
- Cubic-Bezier.com - Trình biên tập đồ thị cubic-bezier trực quan
- Animate.css - Thư viện animation CSS với hơn 80 hiệu ứng
- Animation Performance Guide - Thực hành tốt nhất tối ưu hiệu năng animation CSS
- Easing Cheat Sheet - Tham khảo trực quan các loại easing