CSS Keyframe Animation Studio

Tạo các hoạt hình CSS mượt mà cho phơi, xung, bật, rung và quay với điều khiển thời gian và khung chính.

Chạy trong trình duyệt của bạn. Tệp không bao giờ rời khỏi thiết bị. Xem cách tự kiểm tra

…

Cách thực hiện

  1. 1
    Bước 1: Mở CSS Keyframe Animation Studio và nhập dữ liệu

    Nhập số hoặc văn bản, thêm tệp hoặc chọn các tùy chọn bạn cần. Không có gì được tải lên: mọi thứ nằm trong trình duyệt của bạn.

  2. 2
    Bước 2: CSS Keyframe Animation Studio làm gì

    Tạo các hoạt hình CSS mượt mà cho phơi, xung, bật, rung và quay với điều khiển thời gian và khung chính.

  3. 3
    Bước 3: Đọc kết quả và so sánh

    Kết quả hiện ra ngay. Hãy đổi một giá trị để xem đáp án thay đổi thế nào, rồi giữ con số phù hợp với trường hợp của bạn.

  4. 4
    Bước 4: Sao chép hoặc lưu

    Sao chép kết quả hoặc tải xuống. Với quyết định quan trọng, hãy xác nhận với nguồn chính thức hoặc chuyên gia tư vấn.

Giới thiệu công cụ này

Tạo thêm sự sống cho các nút, huy hiệu anh hùng, biểu tượng thông báo và chỉ số tải. Chọn từ các cài đặt trước hoạt hình UI phổ biến bao gồm Gentle Float, Attention Pulse, Playful Bounce, Error Shake và Infinite Spin. Điều chỉnh thời gian phát trong vài giây và sao chép mã khung khóa CSS sẵn sàng sản xuất.

Mẹo để có kết quả tốt nhất

Trước khi bắt đầu, hãy dành một phút đọc các tùy chọn và thử công cụ với một ví dụ nhỏ trước. Mọi thứ chạy trong trình duyệt trên thiết bị của bạn; không có gì bạn nhập hay thêm được tải lên, và đóng tab sẽ xóa tất cả. Nếu có gì trông không đúng, hãy tải lại trang và thử lại hoặc dùng liên kết báo cáo trên trang này để cho chúng tôi biết điều gì sai. Nếu kết quả vẫn có vẻ sai, hãy thay đổi từng giá trị một để xem ô nào ảnh hưởng nhiều nhất. Hãy đánh dấu trang này nếu bạn sẽ dùng lại.

Tóm tắt

Câu hỏi thường gặp

Những hình ảnh hoạt hình CSS này có được tăng tốc phần cứng không?

Yes. Animations utilize `transform: translate()` and `transform: scale()`, which run on the GPU via compositor threads without layout thrashing.

Tôi có thể điều chỉnh tốc độ hoạt hình không?

Yes. The duration slider allows you to speed up or slow down animations from 0.5 seconds to 4.0 seconds in real time.

Làm thế nào để kích hoạt hình ảnh chỉ trên hover?

In your CSS, attach the `animation:` property inside a `:hover` pseudo-class (e.g., `.button:hover ( animation: pulse 1s infinite; )`).

Điều này có yêu cầu bất kỳ thư viện JavaScript?

Không, các hoạt hình được tạo ra là 100% CSS tinh khiết, không cần JavaScript.

Hoàn toàn miễn phíKhông phí, không đăng ký
Tệp luôn riêng tưMọi thứ chạy trong trình duyệt của bạn
Dễ dùng bằng ngôn ngữ của bạnCó nhiều ngôn ngữ