Wicked CSS – Một Animation Library mới trong Pure CSS3
Bài đăng này đã không được cập nhật trong 6 năm
Nhờ CSS3, bạn có thể xây dựng một số animation phá cách trên web. Chúng có thể hoạt động trên tất cả các trình duyệt và phần tử trang để kiểm soát các mục điều hướng, dropdown menu, tabs...
Trong thực tế, bạn thậm chí có thể tạo ra các mã động bằng cách sử dụng các animation tools. Nhưng chúng khá hạn chế so với một thư viện animation chính thức.
Wicked CSS là thư viện mới nhất thuộc loại này. Điều này làm chúng ta nhớ đến những Animate.css đầu tiên khá đơn giản và thô sơ, nhưng có thể được sử dụng trong bất kỳ trang web nào.
Xem nhanh qua trang chủ với các live demo và danh sách các animations được hỗ trợ. Kể từ khi viết bài này, có tổng cộng 24 animation styles với các chủ đề về rotations và pulsing/bouncing effects. Nhiều animations trong số này là các tính năng được sử dụng để đưa phần tử vào chế độ xem (hoặc không xem được).Điều này thuận tiện cho các trang có hiệu ứng scroll-to-view animations để chuyển đến một phần tử trang cụ thể.
Nhưng bạn cũng có thể sử dụng điều này để hiển thị (hoặc ẩn) các mục trang bổ sung như dropdown menu , thanh tìm kiếm, form đăng ký ẩn hoặc bất kỳ thứ gì khác. Dưới đây là danh sách nhỏ các animations bạn có thể chọn từ:
- Shake
- Zoom in/out
- Slide up/down
- Fade in/out
- Rolling in/out
- Bounce and pop
- Circular rotation in/out
Tất cả các animation styles này được thiết kế cho một lần sử dụng duy nhất. Chúng có thể được gọi nhiều lần trên mỗi trang và mỗi phần tử, nhưng đây không phải là các animation lặp lại.
Thay vào đó, bạn sẽ sử dụng chúng dựa trên hiệu ứng nhấp chuột, di chuột hoặc vuốt của người dùng. Chúng cũng có thể được sử dụng trên các nút CTA cho các hiệu ứng pulsing/throbbing, nhưng điều đó đòi hỏi việc đính kèm JavaScript.
Hãy xem the examples page để xem trước trực tiếp và một số chi tiết khác. Bạn cũng sẽ tìm thấy tài liệu đầy đủ trên trang web chính cùng với repo GitHub.
Wicked CSS là một thư viện mới nên nó chưa có một lượng người theo dõi lớn. Nhưng là một thư viện ổn định và có khả năng sẽ tồn tại trong nhiều năm tới.
All rights reserved