Tạo CSS Animation Với Mẫu Có Sẵn Và Trình Sửa Trực Quan
Công cụ Tạo CSS Animation giúp bạn dựng hiệu ứng @keyframes bằng trực quan mà không cần viết tay. Chọn một mẫu có sẵn, tinh chỉnh thời gian và easing, rồi sao chép đoạn CSS gọn gàng, sẵn dùng thẳng vào stylesheet của bạn.
Công cụ dành cho lập trình viên frontend và nhà thiết kế UI muốn có chuyển động đẹp thật nhanh: dựng thử hiệu ứng xuất hiện, thử nghiệm các đường easing, hay tinh chỉnh một spinner lặp. Bạn có thể chọn trong 35 mẫu thuộc bốn nhóm, điều chỉnh mọi thuộc tính hiệu ứng, và mở Trình sửa Keyframe để tự định hình từng bước. Khung xem trước phát lại hiệu ứng ngay khi bạn làm việc.
Cách Tạo Một CSS Animation
Chọn một mẫu
Chọn tab nhóm — Xuất hiện, Biến mất, Nhấn mạnh, hoặc Lặp — rồi nhấn vào mẫu bất kỳ để áp dụng. Khung xem trước phát ngay lập tức, mọi thuộc tính và keyframe cập nhật theo.
Điều chỉnh thuộc tính
Tinh chỉnh Thời lượng (0,1s đến 5s), Trễ (0s đến 5s), Easing, Số lần lặp (1, 2, 3, hoặc infinite), Hướng (normal, reverse, alternate), và Fill Mode (none, forwards, backwards, both).
Sửa keyframe (tùy chọn)
Mở Trình sửa Keyframe để định hình từng bước. Đặt opacity, translateX, translateY, rotate và scale tại mỗi mốc phần trăm, rồi nhấn Thêm Keyframe để chèn bước mới với giá trị được nội suy.
Xem trước và sao chép
Dùng phát, tạm dừng và phát lại để xem lại chuyển động, đổi hình xem trước (khối, hình tròn, văn bản) và màu nền để thử trong ngữ cảnh. Khi đã ưng, nhấn Sao chép để lấy toàn bộ CSS.
Tính Năng
35 Mẫu Hiệu Ứng Có Sẵn
Thư viện 35 mẫu thuộc bốn nhóm: Xuất hiện, Biến mất, Nhấn mạnh và Lặp, mỗi mẫu có thời gian mặc định hợp lý.
Kiểm Soát Đầy Đủ Thuộc Tính
Đặt thời lượng, trễ, easing, số lần lặp, hướng và fill mode từ một bảng điều khiển trực quan duy nhất.
9 Tùy Chọn Easing
Dùng các đường cong tiêu chuẩn cùng easing tùy chỉnh bounce, elastic, smooth và steps cho hiệu ứng từng khung hình.
Trình Sửa Keyframe Trực Quan
Dòng thời gian hiển thị mọi keyframe; nhấn bước bất kỳ để sửa opacity, translateX/Y, rotate và scale, rồi thêm hoặc xóa bước.
Nội Suy Thông Minh
Keyframe mới được tự điền từ các bước xung quanh, nên khung chèn vào vẫn mượt thay vì nhảy giật.
Xem Trước Trực Tiếp
Xem hiệu ứng phát lại theo thời gian thực với nút phát, tạm dừng và phát lại mỗi khi bạn đổi thiết lập bất kỳ.
Tùy Chọn Hình Dạng Và Nền
Xem trước trên khối, hình tròn hoặc văn bản và đặt màu nền tùy chỉnh để thử chuyển động trong nhiều ngữ cảnh.
Code Gọn Gàng
Lấy trọn khối @keyframes cùng cú pháp rút gọn animation, cập nhật trực tiếp, sao chép một chạm vào clipboard.
Giao Diện Tối
Giao diện tối tích hợp sẵn giúp trình sửa dễ chịu khi dùng trong môi trường thiếu sáng.
Chạy Trong Trình Duyệt
Mọi xử lý đều ở phía trình duyệt, nên hiệu ứng của bạn nằm trên thiết bị của bạn, không gửi gì lên máy chủ.
Câu Hỏi Thường Gặp
Làm sao để tạo một CSS animation?
Chọn một mẫu trong một nhóm, điều chỉnh thời lượng, easing và các thuộc tính khác, rồi tùy ý mở Trình sửa Keyframe để tinh chỉnh từng bước. Khi khung xem trước trực tiếp đã ưng, nhấn Sao chép để lấy toàn bộ CSS. Không cần cài đặt hay đăng ký gì cả.
CSS keyframes và @keyframes là gì?
Quy tắc @keyframes định nghĩa các giai đoạn có tên của một hiệu ứng, mỗi keyframe đặt ở một mốc phần trăm từ 0% đến 100%. Trình duyệt nội suy giữa các giai đoạn đó trong suốt thời lượng hiệu ứng. Công cụ này dựng sẵn quy tắc @keyframes cho bạn và áp dụng nó qua cú pháp rút gọn animation.
Tôi có thể tạo hiệu ứng cho những thuộc tính CSS nào?
Trình sửa Keyframe điều khiển opacity, translateX, translateY, rotate và scale — những thuộc tính được tăng tốc GPU trên hầu hết trình duyệt để chuyển động mượt. Một số mẫu còn dùng các transform phong phú hơn như scaleX, scaleY, skewX, skewY và rotateX, và chúng được đưa vào code tạo ra.
Fill mode có tác dụng gì?
Fill mode kiểm soát cách phần tử trông như thế nào trước và sau hiệu ứng. none đưa nó về kiểu gốc, forwards giữ kiểu của keyframe cuối, backwards áp dụng keyframe đầu trong lúc trễ, và both kết hợp cả hai. Với hiệu ứng xuất hiện, forwards thường giữ phần tử hiển thị sau khi nó hiện dần lên.
Nên dùng hàm easing nào?
Dùng ease-out cho hiệu ứng xuất hiện (bắt đầu nhanh, dừng nhẹ nhàng), ease-in cho biến mất (bắt đầu nhẹ, kết thúc nhanh), và ease-in-out cho nhấn mạnh và lặp. Chọn linear cho spinner quay liên tục, và dùng bounce hoặc elastic khi bạn muốn cảm giác vui mắt, thu hút sự chú ý.
Làm sao để tạo hiệu ứng lặp vô hạn (infinite)?
Đặt Số lần lặp thành infinite. Các mẫu nhóm Lặp — như Spin, Float và Wave — vốn đã dùng số lần lặp infinite, nên chúng tự phát mãi. Kết hợp infinite với hướng alternate tạo ra chuyển động qua lại mượt mà.
CSS animation và transition khác nhau thế nào?
Transition tạo hiệu ứng cho một thay đổi đơn lẻ giữa hai trạng thái và cần một tác nhân kích hoạt như di chuột hay đổi class. Hiệu ứng keyframe có thể định nghĩa nhiều giai đoạn trung gian, có thể lặp, và tự khởi chạy. Công cụ này tập trung vào hiệu ứng @keyframes, giúp bạn kiểm soát tinh hơn chuyển động nhiều bước.
Làm sao để sao chép đoạn CSS tạo ra?
Nhấn nút Sao chép trên bảng code. Nó sao chép toàn bộ kết quả — khối @keyframes cùng một quy tắc .element với cú pháp rút gọn animation — vào clipboard, sẵn sàng dán vào stylesheet của bạn. Kết quả dùng các thuộc tính tiêu chuẩn được hỗ trợ trên mọi trình duyệt hiện đại, không cần tiền tố nhà cung cấp.
Chưa có bình luận nào. Hãy là người đầu tiên!