Tạo hoạt ảnh CSS
Tạo hoạt ảnh keyframe CSS bằng trình chỉnh sửa dòng thời gian trực quan
Cài đặt hoạt ảnh
Hoạt ảnh có sẵn
Keyframe
0% → 100%
Keyframe · 0%
Keyframe · 100%
Xem trước trực tiếp
CSS được tạo
@keyframes myAnimation {
0% {
opacity: 1;
}
100% {
opacity: 1;
}
}
.animated-element {
animation-name: myAnimation;
animation-duration: 1s;
animation-timing-function: ease;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: none;
animation-delay: 0s;
}Chỉnh các keyframe và phát lại để kiểm tra hoạt ảnh của bạn.
Ví dụ nhanh về phép biến đổi
translateX(100px) / translateY(-50px)rotate(45deg) / rotate(360deg)scale(1.5) / scale(0.5)skewX(10deg) và skewY(-5deg)perspective(400px) và rotateY(180deg)Giới thiệu về công cụ Tạo hoạt ảnh CSS
Công cụ tạo hoạt ảnh CSS miễn phí của chúng tôi cho phép bạn dựng hoạt ảnh keyframe chuyên nghiệp bằng giao diện trực quan, không cần viết mã phức tạp từ đầu. Cấu hình mọi khía cạnh của hoạt ảnh, từ thời lượng, hàm thời gian đến thuộc tính của từng keyframe, và xem kết quả ngay lập tức nhờ bản xem trước trực tiếp cập nhật theo thời gian thực.
Dù bạn cần một hiệu ứng mờ dần hiện ra tinh tế, một hiệu ứng nảy bắt mắt hay hoạt ảnh nhiều bước tùy chỉnh, công cụ này có 10 mẫu dựng sẵn và trình chỉnh sửa keyframe đầy đủ. Mỗi mẫu đều tùy chỉnh được hoàn toàn, nên bạn có thể dùng làm điểm xuất phát và tinh chỉnh mọi thuộc tính, gồm transform, opacity và màu nền, tại bất kỳ mốc phần trăm nào.
Công cụ xuất ra mã CSS sẵn sàng cho sản phẩm gọn gàng với cú pháp @keyframes chuẩn và các thuộc tính animation riêng lẻ. Chỉ cần sao chép mã được tạo và dán vào stylesheet của bạn. Mọi xử lý diễn ra trong trình duyệt, không tải lên máy chủ, giúp công việc của bạn riêng tư và an toàn.
Tính năng chính
- Trình chỉnh sửa keyframe trực quan với điều khiển transform, opacity và background-color cho từng keyframe
- 10 mẫu hoạt ảnh dựng sẵn: Nảy, Mờ dần hiện, Mờ dần biến mất, Trượt vào từ trái, Trượt vào từ phải, Xoay, Đập nhịp, Rung, Lật và Phóng to
- Bảng xem trước trực tiếp với khả năng phát lại ngay để kiểm tra hoạt ảnh
- Điều khiển đầy đủ thuộc tính hoạt ảnh gồm thời lượng, hàm thời gian, số lần lặp, hướng, chế độ fill và độ trễ
- Hỗ trợ hàm thời gian cubic-bezier tùy chỉnh cho đường cong chuyển động chính xác
- Thêm và xóa keyframe tại bất kỳ mốc phần trăm nào (0%, 25%, 50%, 75%, 100% hoặc tùy chỉnh)
- Kết quả CSS gọn gàng gồm @keyframes và các thuộc tính animation riêng lẻ, sẵn sàng cho sản phẩm
- Sao chép vào bộ nhớ tạm bằng một lần nhấn để tích hợp ngay vào dự án của bạn
- Đặt tên hoạt ảnh tùy chỉnh để mã có tổ chức và dễ hiểu
- Hỗ trợ đầy đủ chế độ tối để chỉnh sửa thoải mái trong mọi môi trường
Cách sử dụng công cụ Tạo hoạt ảnh CSS
- Chọn điểm xuất phát: Chọn một trong 10 mẫu dựng sẵn như Nảy, Mờ dần hiện hoặc Xoay, hoặc bắt đầu với một hoạt ảnh trống.
- Điều chỉnh thuộc tính hoạt ảnh: Đặt thời lượng, hàm thời gian, số lần lặp, hướng, chế độ fill và độ trễ bằng các điều khiển dễ dùng.
- Chỉnh sửa keyframe: Thêm, xóa hoặc sửa keyframe tại bất kỳ mốc phần trăm nào. Đặt giá trị transform, opacity và màu nền cho từng keyframe.
- Xem trước hoạt ảnh: Theo dõi bản xem trước trực tiếp cập nhật theo thời gian thực. Nhấn Phát lại để chạy lại hoạt ảnh và kiểm tra kết quả.
- Sao chép mã CSS: Nhấn nút Sao chép CSS để chép mã @keyframes và mã thuộc tính animation đã tạo vào bộ nhớ tạm.
- Dán vào dự án: Thêm đoạn CSS đã sao chép vào stylesheet và áp dụng lớp hoạt ảnh cho các phần tử HTML của bạn.
Trường hợp sử dụng
- Tương tác vi mô: Thêm hiệu ứng di chuột tinh tế, hoạt ảnh cho nút và tín hiệu phản hồi để tăng mức độ tương tác của người dùng.
- Chỉ báo đang tải: Tạo vòng quay tùy chỉnh, hiệu ứng đập nhịp và hoạt ảnh màn hình khung xương cho các trạng thái đang tải.
- Chuyển trang: Dựng hiệu ứng trượt vào, mờ dần hiện và phóng to cho các phần tử trang chuyển động khi cuộn hoặc tải.
- Thu hút sự chú ý: Thiết kế hoạt ảnh rung, nảy và đập nhịp để hướng sự chú ý của người dùng đến các phần tử giao diện quan trọng.
- Làm mẫu cho hệ thống thiết kế: Nhanh chóng làm mẫu và chuẩn hóa các kiểu hoạt ảnh trong thư viện thành phần của nhóm bạn.
- Học hoạt ảnh CSS: Thử nghiệm keyframe, hàm thời gian và thuộc tính hoạt ảnh trong một môi trường trực quan.
- Hiệu ứng thuyết trình: Tạo các phần tử chuyển động cho bài thuyết trình trên web và hồ sơ năng lực.
Câu hỏi thường gặp
Công cụ này có miễn phí không?
Có, công cụ Tạo hoạt ảnh CSS hoàn toàn miễn phí và không giới hạn lượt dùng. Bạn có thể tạo không giới hạn hoạt ảnh, dùng mọi mẫu có sẵn và sao chép mã CSS được tạo mà không bị hạn chế nào.
Dữ liệu của tôi có an toàn không?
Toàn bộ việc tạo và xem trước hoạt ảnh diễn ra hoàn toàn trong trình duyệt của bạn. Không có dữ liệu nào được gửi đến máy chủ, nên cấu hình hoạt ảnh và mã CSS của bạn hoàn toàn riêng tư.
Những trình duyệt nào hỗ trợ hoạt ảnh CSS?
Hoạt ảnh CSS được hỗ trợ bởi mọi trình duyệt hiện đại, gồm Chrome, Firefox, Safari, Edge và Opera. Mã được tạo dùng cú pháp @keyframes chuẩn, chạy được trên mọi phiên bản trình duyệt hiện hành.
Tôi có thể kết hợp nhiều hoạt ảnh trên một phần tử không?
Có, bạn có thể áp dụng nhiều hoạt ảnh cho một phần tử bằng cách ngăn cách các tên hoạt ảnh bằng dấu phẩy trong CSS. Hãy tạo từng hoạt ảnh riêng rồi kết hợp chúng trong stylesheet của bạn.
Hàm thời gian cubic-bezier là gì?
Hàm cubic-bezier xác định một đường cong gia tốc tùy chỉnh cho hoạt ảnh của bạn. Nó dùng bốn giá trị để điều khiển cách hoạt ảnh tăng tốc và giảm tốc, cho bạn khả năng kiểm soát chính xác hơn các tùy chọn chuẩn như ease-in hay ease-out.
Mẹo và thực hành tốt nhất
- Dùng transform và opacity: Hãy tạo hoạt ảnh cho thuộc tính transform và opacity để có hiệu năng tốt nhất, vì GPU có thể tăng tốc phần cứng cho chúng.
- Giữ hoạt ảnh tinh tế: Hoạt ảnh nhẹ nhàng (0.2s-0.5s) tạo cảm giác trau chuốt hơn những hoạt ảnh dài, kịch tính trong đa số tương tác giao diện.
- Tôn trọng tùy chọn của người dùng: Dùng media query prefers-reduced-motion để tắt hoặc giảm hoạt ảnh cho những người muốn ít chuyển động hơn.
- Chọn chế độ fill phù hợp: Dùng "forwards" để giữ trạng thái cuối, "backwards" để áp dụng keyframe đầu tiên trong thời gian trễ, hoặc "both" để kiểm soát hoàn toàn.
- Kiểm tra trên nhiều thiết bị: Xem trước hoạt ảnh trên thiết bị di động, nơi hiệu năng có thể khác với trình duyệt máy tính.