Xin chào,
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).
2. Tùy chỉnh
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ư
- thời gian (duration)
- độ trễ (delay)
- hướng (direction)
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à:
- một khối trung tâm đơn giản
- một nhân vật
- một background
- hoặc thậm chí là một hình ảnh
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.
Bạn thậm chí còn có thể chọn thu nhỏ đoạn code ấy.
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 CSS
Tấ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ụ:
<div class="animated slideInLeft"></div>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.
- Với JavaScript
document.querySelector('.my-element').classList.add('animated', 'slideInLeft')
- Với Jquery
$(".my-element").addClass("animated slideInLeft")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.
- delay
Thêm độ trễ vào animation với class delay
<div class="animated slideInLeft delay-{1-5}"><div>
- speed
Kiểm soát tốc độ animation bằng cách thêm một trong những class dưới đây:
| Tên class | Thời gian |
| slow | 2s |
| slower | 3s |
| fast | 800ms |
| faster | 500ms |
<div class="animated slideInLeft slow|slower|fast|faster"><div>
3. Vivify
Vivify là một thư viện animation mà mình luôn xem là phiên bản nâng cao của Animate CSS. Nó hoạt động giống hệt Animate CSS, có hầu hết những class của Animate CSS, nhưng lại được bổ sung thêm một số class khác nữa. Thay vì thêm class animated vào một element thì bạn thêm vivify. Ví dụ:
<div class="vivify slideInLeft"></div>- Với JavaScript
document.querySelector('.my-element').classList.add('vivify', 'slideInLeft')- Với JQuery
$(".my-element").addClass("vivify slideInLeft")Giống Animate CSS, Vivify cũng có một số class để kiểm soát thời lượng và độ trễ của animation. Cả hai đều có sẵn trong phần sau:
<div class="delay|duration-{100|150|200|250...1000|1250|1500|1750...10750}"></div>Lưu ý những giá trị này được tính bằng ms. 1000ms = 1 giây
4. Magic Animations CSS3
Thư viện animation này có một số animation thực sự đẹp, mượt mà, mình đặc biệt thích những animation 3D.
Hãy thêm magictime {animation_name} cho element của mình và tự thử trải nghiệm với nó nhé.
<div class="magictime fadeIn"></div>- Với JavaScript
document.querySelector('.my-element').classList.add('magictime', 'fadeIn')- Với Jquery
$(".my-element").addClass("magictime fadeIn")5. cssanimation.io
cssanimation.io là một bộ sưu tập gồm rất nhiều animation khác nhau vô cùng tuyệt vời, khoảng 200 cái, nếu bạn không tìm thấy animation mà bạn cần ở đây thì mình dám chắc bạn sẽ chẳng tìm thấy được ở đâu nữa cả.
cssanimation.io hoạt động tương tự như Animista. Ví dụ: bạn có thể chọn một animation, lấy mã trực tiếp từ trang web, hoặc cũng có thể tải xuống toàn bộ thư viện.
Cách dùng
Thêm cssanimation {animation_name} vào element.
<div class="cssanimation fadeIn"></div>- Với JavaScript
document.querySelector('.my-element').classList.add('cssanimation','fadeIn')- Với Jquery
$(".my-element").addClass("cssanimation fadeIn")Bạn cũng có thể thêm class infinite để animation tiếp tục lặp lại nữa.
<div class="cssanimation fadeIn infinite"></div>Thêm nữa, cssanimation.io cũng có một tính năng cho các chữ cái anime. Bạn sẽ cần file letteranimation.js được bao gồm trong thẻ head, sau đó thêm le {animation_name} vào element văn bản.
<div class="cssanimation leSnake"></div>Để tạo hiệu ứng cho các chữ cái theo thứ tự, thêm class sequence, để tạo hiệu ứng ngẫu nhiên, thêm class random.
Sequence
Random
6. Angrytools
Angrytools thực ra là một bộ sưu tập với các generator khác nhau, bao gồm cả animation generator CSS. Nó có thể không phức tạp như Animista, nhưng mình thấy nó khá tốt.
Trang web này cũng cung cấp cho các bạn một số tính năng để tùy chỉnh animamtion ví dụ như thời lượng hoặc độ trễ.
Tuy nhiên, điều mình thích ở đây là bạn có thể tự thêm keyframes vào timeline, sau đó có thể viết code trực tiếp ở đó. Ngoài ra, bạn cũng có thể chỉnh sửa những code đã có.
Bạn có thể lấy đoạn code hoàn chỉnh của animation khi hoàn thành hoặc có thể tải xuống code mà bạn muốn.
7. Hover.css
Hover.css là một bộ sưu tập gồm rất nhiều animation CSS không giống như các loại đã kể trên trên, nó được kích hoạt mỗi khi bạn di chuột vào một element.
Một tập hợp các hiệu ứng hover được hỗ trợ CSS3 sẽ được áp dụng cho các liên kết, nút, logo, SVG, hình ảnh, v.v...
Hover.css có một số animation thực sự tuyệt. Và hơn thế nữa, nó cũng có các class để tạo hiệu ứng cho các biểu tượng, chẳng hạn như phông chữ thật cool ngầu 😎
Cách dùng
Rất đơn giản: chỉ cần thêm tên của class vào element như sau:
<button class="hvr-fade">Hover me!</button>8. WickedCSS
WickyCSS là một thư viện animation CSS nhỏ và không có quá nhiều biến thể animation, nhưng những cái mà nó có ít nhất là rất tốt. Hầu hết là những cái cơ bản mà chúng ta đã quá quen thuộc nhưng lại cực kỳ clean.
Cách sử dụng cũng rất đơn giản, chỉ cần thêm tên của animation vào element.
<div class="bounceIn"></div>- Với JavaScript
document.querySelector('.my-element').classList.add('bounceIn')
- Với Jquery
$(".my-element").addClass("bounceIn")9. Three Dots
Three Dots là một tập hợp các CSS loading animation với ba dấu chấm được tạo bởi chỉ một element đơn.
Cách dùng
Chỉ cần tạo một div element và thêm vào tên của animation:
<div class="dot-elastic"></div>10. CSShake
Và cuối cùng là một số animation về rung và lắc. Giống như cái tên của mình, CSShake là một thư viện animation CSS chứa các loại hoạt ảnh lắc khác nhau.
Cách dùng
Thêm shake {animation_name} vào element.
<div class="shake shake-hard"></div>- Với JavaScript
document.querySelector('.my-element').classList.add('shake','shake-hard')- Với Jquery
$(".my-element").addClass("shake shake-hard")Bài viết được tham khảo từ đây, cám ơn bạn đã đọc đến hết bài, nếu bạn biết thêm một thư viện nào vừa đỉnh vừa cool ngầu khác thì nhớ bình luận để mình và các bạn độc giả khác biết với nhé!
Bình luận