Thư viện hiệu ứng css
Xin chào, Show Giống như tiêu đề, trong bài viết này mình sẽ liệt kê top 10 thư viện animation CSS tốt nhất. Đây đều là những thư viện không cần đến JS để hoạt động, thú vị chưa ? 🤩 Cùng xem là những gì nhé! 1. AnimistaĐây thực sự là một trang web mình mới phát hiện không lâu và mình đã yêu nó ngay lập tức. Animista vừa là một animation generator vừa là một thư viện trực tuyến với các tính năng sau: 1. Chọn từ nhiều hiệu ứng animation khác nhau Bạn có thể chọn loại hiệu ứng animation nào bạn thích (như entrance - chuyển động vào / exist - chuyển động thoát), ngoài ra bạn có thể chọn một loại animation nhất định (ví dụ: scale-in), và thậm chí nhiều hơn, bạn thậm chí có thể chọn nhiều kiểu khác nhau cho animation đó (ví dụ: scale-in-right).
Animista cũng có một tính năng cho phép bạn tùy chỉnh một số phần của animation, chẳng hạn như
Tuyệt hơn nữa là bạn có thể chọn đối tượng bạn muốn để tạo hiệu ứng, có thể là:
3. Lấy code CSS Sau khi bạn đã chọn một animation, điều chỉnh theo ý thích, bạn có thể lấy code trực tiếp từ trang
web. 4. Download các animation đã chọn Thêm một tính năng tuyệt vời khác nữa đó là nếu bạn thích một animation nào đó thì bạn có thể download code của chỉ những cái bạn thích. Hoặc bạn cũng có thể chọn sao chép code của các animation đó cùng với nhau. Tuy nhiên, tuyệt nhất vẫn là tính năng full responsive của nó, nghĩa là, ngay cả khi bạn đang sử dụng điện thoại thì bạn vẫn có thể thao tác và dùng thử được. 2. Animate CSSTất nhiên rồi, mình phải nhắc đến Animate CSS chứ, đây là một trong những thư viện animation nổi tiếng nhất mà. 1. Cách sử dụng Bạn luôn cần phải thêm class animate vào bất kỳ element nào mà bạn muốn tạo hiệu ứng, sau đó là tên của animation. Ví dụ:
Nếu bạn muốn animation chuyển động nhất quán, bạn có thể thêm class infinite để animation lặp lại không ngừng.
2. Các tính năng bổ sung Animate CSS cung cấp một số class cơ bản để điều chỉnh độ trễ (delay) và tốc độ (speed) của animation.
Thêm độ trễ vào animation với class delay
|