1. Giới thiệu

Animate.css là thư viện animation được viết sẵn bằng css. Hỗ trợ rất hữu ích cho chúng ta phát triển hiệu ứng website.

Trang web: https://daneden.github.io/animate.css/
Document: https://github.com/daneden/animate.css

2. Cách sử dụng

Bước 1: Đầu tiên bạn tạo html như bình thường.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
    <div class="div-animation" style="background-color: #ccc; width: 300px; height: 200px">
        noi dung the div
    </div>
</body>
</html>

Bước 2: Gắn link sau vào phần thẻ head

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">

Bước 3: Vào trang https://daneden.github.io/animate.css/ chọn hiệu ứng cho phù hợp

Bước 4: Lấy tên của animation gắn vào thuộc tính animaion-name trong chỗ định dạng element của bạn.

.div-animation {
  animation-name: bounce;  //tên của animation
  animation-duration: 3s; // thời gian thực hiện hiệu ứng
  margin: 0px auto;
}

Toàn bộ code chương trình sẽ như sau:

<!--Này mình sử dụng hiệu ứng zoomIn -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
</head>

<style>
    .div-animation {
        animation-name: zoomIn;
        animation-duration: 3s;
        margin: 0px auto;
    }
</style>

<body>
    <div class="div-animation" style="background-color: #ccc; width: 300px; height: 200px">
        noi dung the div
    </div>
</body>
</html>