Top 5 thư viện CSS làm chuyển động thú vị cho năm 2016

Chúng ta đã thấy được kỹ thuật này rất hay, giúp người dùng cảm thấy thú vị khi sử dụng website, đồng thời giúp designer, developer có nhiều ý tưởng và hướng đi mới.
Tuy nhiên, để tạo ra một chuyển động đủ sức thuyết phục thì khoảng thời gian bỏ ra không hề nhỏ.
Bài viết này sẽ liệt kê 5 thư viện CSS giúp bạn tiết kiệm thời gian làm chuyển động bằng CSS. Bạn sẽ có ngay những chuyển động mạnh mẽ chỉ với vài dòng code.

Animate.css

Animate.css là một trong những thư viện bóng bẩy nhất và dễ sử dụng nhất, đơn giản là bạn chỉ cần thêm class tương ứng với hiệu ứng mà bạn cần vào phần tử HTML.

Tác giả: Daniel Eden
Phát hành: 2013
Phiên bản hiện tại: 3.4.0
Đánh giá: 28,700+ sao trên GitHub
Mô tả: “Một thư viện CSS làm chuyển động, tương thích nhiều trình duyệt, dễ hiểu, dễ sử dụng”
Dung lượng: 55.2 Kb
GitHub: https://github.com/daneden/animate.css
Bản quyền: MIT

Animate.css cũng là một trong những thư viện làm chuyển động được sử dụng rộng rãi nhất. Bạn chắc chắn nên thử nó cho dự án tới!

CSShake

Như cái tên CSShake, thư viện này giúp bạn làm chuyển động rung lắc.

Tác giả: Lionel
Phát hành: 2014
Phiên bản hiện tại: 3.4.0
Đánh giá: 2,400+ sao trên GitHub
Mô tả: “Chỉ cần đặt tên class để làm dịch chuyển DOM của bạn”
Dung lượng: 78.8 Kb
GitHub: https://github.com/elrumordelaluz/csshake
Bản quyền: MIT

Apple đã phổ biến UI kiểu rung lắc, như là một sự phản hồi tới người dùng rằng họ đã làm sai điều gì đó.

Hover.css

Hover.css là thư viện thiết kế cho nút bấm “buttons”

Tác giả: Ian Lunn
Phát hành: 2014
Phiên bản hiện tại: 2.0.2
Đánh giá: 12,100+ sao trên GitHub
Mô tả: “Dễ dàng áp dụng cho phần tử của bạn, có thể tùy chỉnh hoặc sử dụng ngay”
Dung lượng: 104.2 Kb
GitHub: https://github.com/IanLunn/Hover
Bản quyền: MIT

Ngoài nút bấm, bạn cũng có thể sử dụng hover.css cho logo, SVG …
Những gì hover.css làm được là khá hay, tuy nhiên với dung lượng 104.2 Kb thì có lẽ nó cần được tùy chỉnh cho gọn gàng hơn.

Magic Animations

Magic Animations là một trong những thư viện CSS ấn tượng, có rất nhiều kiểu chuyển động độc đáo. Cũng đơn giản như Animate.css, bạn chỉ cần import file CSS.

Tác giả: Christian
Phát hành: 2014
Phiên bản hiện tại: 1.1.0
Đánh giá: 3,700+ sao trên GitHub
Mô tả: “Tạo chuyển động đặc biệt với CSS3”
Dung lượng: 36.5 Kb
GitHub: https://github.com/miniMAC/magic

Magic Animation cùng tầm cỡ với Animate.css, và nó nổi lên như một thư viện hàng đầu về kiểu hiệu ứng ma thuật, kiểu hiệu ứng hài hước hay kiểu hiệu ứng ấn tượng.
Nếu bạn đang tìm kiếm thứ gì đó bất thường, bạn sẽ không phải thất vọng với Magic Animation.

CSS3 Animation Cheat Sheet

CSS3 Animation Cheat Sheet được tạo bởi Justin Aguilar. Trên trang cá nhân của mình, cô viết: “Trong lúc rảnh rỗi, tôi đã tạo ra bộ công cụ dễ sử dụng cho CSS3 Animation này.”

Tác giả: Justin Aguilar
Phát hành: 2014
Phiên bản hiện tại: 1.0
Dung lượng: 18.3 Kb
Mô tả: “Tôi là Justin Aguilar, hiện thiết kế sản phẩm cho Instagram. Trong lúc rảnh rỗi tôi đã tạo ra CSS3 Animation, nó rất dễ sử dụng.”
Trang chi tiết: http://www.justinaguilar.com/animations/

Tổng kết

Tạo chuyển động bằng CSS đã khá phổ biến. Qua 5 ví dụ bên trên chắc chắn bạn đã thấy sử dụng CSS làm chuyển động rất thuận tiện và cải thiện khả năng tương tác của người dùng.
Tuy nhiên, nếu sử dụng kỹ thuật này một cách quà đà có thể sẽ làm người dùng bối rối. Hãy cẩn trọng và sử dụng chúng một cách hợp lý.
Trên đây là 5 thư viện mình dự đoán sẽ được sử dụng nhiều năm 2016, hãy comment những thư viện hay mà bạn biết nhé!