Share Tạo hiệu ứng đẹp mắt với thư viện Animate.css

[filiallion]

Language

Tiếng Việt

Một trong những tính năng tuyệt vời nhất của CSS đó chính là tạo các hiệu ứng chuyển động với CSS3 Animation. Trước đây, mỗi khi tạo hiệu ứng cho website các bạn phải nhờ đến sự giúp sức của JavaScript. Giờ đây, công việc này đã phần nào được đơn giản hóa bởi CSS cụ thể là CSS3 Animation. Mặc dù đây là một tính năng tuy thú vị nhưng cũng đầy thách thức với các bạn lập trình viên giao diện chưa có nhiều kinh nghiệm. Hiểu được những khó khăn đó, Daniel Eden - Một designer của Facebook đã tạo ra một thư viện CSS với 76 hiệu ứng chuyển động khác nhau mang tên Animate.css giúp cho các bạn tạo nhanh các hiệu ứng với việc sử dụng rất đơn giản.

Để sử dụng các hiệu ứng chuyển động trong Animate.css, các bạn tải thư viện tại địa chỉ https://daneden.github.io/animate.css và tích hợp vào website. Thư viện Animate.css chỉ có một tập tin duy nhất tên là animate.css. Các bạn tích hợp tập tin CSS này vào website với dòng lệnh như sau:

<link href="path/to/animate.css" rel="stylesheet">

Để sử dụng các hiệu ứng có trong thư viện Animate.css, các bạn chỉ việc gọi các class được cung cấp bởi thư viện như ví dụ sau:

<h1 class="animated infinite bounce">Gextend</h1>

Các bạn có thể tìm hiểu thêm các hiệu ứng khác cũng như các vấn đề mở rộng của thư viện Animate.css tại địa chỉ https://github.com/daneden/animate.css.