Xây dựng hình ảnh động CSS dễ dàng với Animista

Có hàng tấn ứng dụng web hoạt hình CSS trực tuyến. Nhưng, rất ít so với mức độ chi tiết và dễ sử dụng mà bạn có được với Animista.

Ứng dụng web miễn phí này cho phép bạn tạo hình ảnh động CSS tùy chỉnh chỉ với một nút bấm. Bạn chọn giữa các chuyển động được thiết kế sẵn như slide, biến đổi, xích đu và thậm chí cả hình động thả bóng.

Khi bạn đã tạo hoạt hình của mình, bạn có thể xuất mã giống như với các trình tạo CSS khác. Ngoại trừ, mã này dễ làm việc hơn và thậm chí đi kèm với một công cụ khai thác tích hợp.

Giao diện ban đầu có thể cảm thấy khó hiểu nhưng đó chỉ là do bạn có bao nhiêu tùy chọn!

Bạn xây dựng hình ảnh động tùy chỉnh theo ba bước chính và sử dụng giao diện từ đầu đến cuối:

1. Chọn một phong cách chuyển động (xoay, trượt, lật tỷ lệ) từ các vòng tròn ở trên cùng
2. Tùy chỉnh nó với các loại chuyển động khác nhau bên dưới
3. Chỉnh sửa tùy chọn hoạt hình của bạn trong thanh tùy chọn bên trái nổi

Thông qua quá trình này, bạn có thể thay đổi tổng thời lượng của hoạt hình, phong cách nới lỏng, độ trễ, khá nhiều thứ. Và tất cả hoạt động thông qua CSS3 thuần túy, mà làm cho nó thậm chí còn ấn tượng hơn.

Cũng lưu ý ở thanh điều hướng trên cùng, bạn thậm chí có thể chọn giữa các loại mục tiêu hoạt hình khác nhau.

Các mặc định là “căn bản” có thể hoạt động trên hầu hết mọi thứ (di chuột, nhấp hoặc hoạt hình ngay lập tức). Các mục tiêu khác bao gồm văn bản trang, hình động nền và thậm chí hình ảnh động lối vào tùy chỉnh để đưa một yếu tố trang ẩn vào xem.

Tôi đặc biệt thích “chú ý” liên kết ở trên cùng có một số hiệu ứng lắc & jitter thú vị cho các kiểu nút. Chúng hoạt động rất tốt trên các nút CTA để thu hút sự chú ý và khuyến khích sự tương tác của người dùng.

Khi bạn đã hoàn tất việc điều chỉnh, bạn chỉ cần nhấp vào biểu tượng khung nhỏ ở góc trên bên phải của khung xem trước.

Điều này mang lại một trang mới vào xem với lớp hoạt hình CSS đầy đủ của bạn, cùng với các khung hình chính. Các tính năng tùy chọn cho phép bạn giảm thiểu mã và bao gồm tiền tố tự động hỗ trợ các trình duyệt web cũ hơn.

Tôi đã sử dụng hàng tấn công cụ hoạt hình CSS tùy chỉnh và không nghi ngờ gì nữa, Animista là công cụ giàu tính năng nhất hiện có. Ban đầu nó hoàn toàn miễn phí và hơi phức tạp nhưng một khi bạn hiểu giao diện, thì đến nay nó là trình tạo tốt nhất bạn có thể sử dụng.

Để dùng thử, chỉ cần truy cập trang chủ và nhấp “Thử tôi”. Bạn cũng có thể chia sẻ suy nghĩ và lời khen của mình với người tạo ứng dụng web @ ana108.