Tidadigi Logo

Tailwind CSS Animation

Class này chấp nhận nhiều giá trị trong tailwind CSS, tất cả thuộc tính được trình bày dưới dạng class. Class này được dùng để tạo hiệu ứng động cho các phần tử bằng CSS animation. Trong CSS, bạn có thể làm điều đó bằng cách sử dụng thuộc tính CSS animation.

Animation classes :

  • animate-spin:  Class này được dùng để thêm một hiệu ứng xoay tuyến tính cho các phần tử.
  • animate-ping: Class này dùng tạo hiệu ứng phóng to và mờ dần như radar hoặc sóng nước.
  • animate-bounce: Class này được dùng để làm cho một phần tử nảy lên và xuống.
  • animate-pulse: Class này được dùng để làm cho một phần tử mờ dần một cách nhẹ nhàng.

Syntax :

<element class="animate-{animation_name}">...</element>

Example 1: Đoạn code sau triển khai các class animation-spin và animation-ping.

HTML 
<!DOCTYPE html>
<html>
<head> 
    <link href= 
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
        rel="stylesheet"> 
</head> 
<body class="text-center mx-4 space-y-2">
    <h1 class="text-green-600 text-5xl font-bold"> 
        GeeksforGeeks 
    </h1> 
    <b>Tailwind CSS Animation</b> 

    <div class="m-auto ml-10 h-20 w-20 
                bg-green-300 animate-spin">
        Spin
    </div>
    <div class="m-auto mt-0 h-20 w-20 
                bg-green-500 animate-ping">
         Ping
    </div>
</body>
</html>

Output:

Example 2: Đoạn code sau triển khai các class animation-bounce và animation-pulse.

HTML 
<!DOCTYPE html>
<html>
<head> 
    <link href= 
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
        rel="stylesheet"> 
</head> 
<body class="text-center mx-4 space-y-2">
<h1 class="text-green-600 text-5xl font-bold"> 
        GeeksforGeeks 
    </h1> 
    <b>Tailwind CSS Animation</b> 

    <div class=" m-auto ml-10 h-20 w-20
                bg-green-600 animate-pulse">
       Pulse
    </div>
    <div class="m-auto mt-0 h-20 w-20 
                bg-green-700 animate-bounce">
       Bounce
    </div>


</body>
</html>

Output:


Last Updated : 20/07/2025