How to use CSS Animations with Tailwind CSS ?

Last Updated : 15 Apr, 2024

Tailwind CSS classes are used to style elements and apply animations effortlessly. Utilize Tailwind’s animation utility classes to add dynamic visual effects. Combine Tailwind CSS with custom CSS animations for versatile and engaging web designs.

Table of Content

Tailwind CSS Animation Utility Classes
CSS Animations with Tailwind CSS and JavaScript
Tailwind CSS and Internal CSS Styling

Tailwind CSS Animation Utility Classes

In this approach, the ‘animate-bounce’, ‘animate-spin’, ‘animate-pulse’, and ‘animate-ping’ classes trigger corresponding animations, such as bouncing, spinning, pulsing, and pinging, respectively. Each animated element is styled with background color and text color classes for visual appeal.

Example: The example below uses pre-built utility classes from Tailwind CSS to easily apply animations to elements.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS Animation Utility Classes</title>
    <link href=
"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" 
          rel="stylesheet">
</head>

<body class="bg-gray-100 flex justify-center
             items-center h-screen">
    <div class="text-center">
        <div class="animate-bounce bg-blue-500 text-white
                    px-4 py-2 rounded-md shadow-md mb-4">
          Bouncing Animation
          </div>
        <div class="animate-spin bg-green-500 text-white
                    px-4 py-2 rounded-md shadow-md mb-4">
          Spinning Animation
          </div>
        <div class="animate-pulse bg-purple-500 text-white
                    px-4 py-2 rounded-md shadow-md mb-4">
          Pulsing Animation
          </div>
        <div class="animate-ping bg-yellow-500 text-white
                    px-4 py-2 rounded-md shadow-md mb-4">
          Ping Animation
          </div>
        <div class="animate-bounce bg-red-500 text-white
                    px-4 py-2 rounded-md shadow-md mb-4">
          Bouncing Animation
          </div>
    </div>
</body>

</html>

Output:

73946383-4121-4bf6-8442-b4da86bb25db

CSS Animations with Tailwind CSS and JavaScript

In this approach, the ‘clickMe’ element, styled with Tailwind CSS classes, toggles a spinning animation when clicked. This animation is defined using the @keyframes rule in the embedded CSS, rotating the element 360 degrees. Additionally, hovering over the second element triggers a bouncing animation.

Example: The example below shows CSS Animations with Tailwind CSS and JavaScript.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>CSS Animations with Tailwind CSS and JavaScript</title>
    <link href=
"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" 
          rel="stylesheet">
    <style>
        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</head>

<body class="bg-gray-100 flex justify-center 
             items-center h-screen">
    <div class="text-center">
        <div id="clickMe"
            class="bg-blue-500 text-white px-4 
                   py-2 rounded-md shadow-md 
                   mb-4 cursor-pointer 
                   hover:animate-pulse"
            onclick="toggleSpin()">
          Click to Spin
          </div>
        <div class="bg-green-500 text-white px-4
                    py-2 rounded-md shadow-md mb-4
                    cursor-pointer hover:animate-bounce">
            Hover Animation
          </div>
    </div>
    <script>
        function toggleSpin() {
            let clickMe = document.getElementById('clickMe');
            clickMe.classList.toggle('animate-spin');
            clickMe.classList.contains('animate-spin') ? 
            clickMe.style.animation = "spin 2s linear infinite" 
            : clickMe.style.animation = "";
        }
    </script>
</body>

</html>

Output:

61a81752-1878-4870-875f-2b0b21f31e0e

Tailwind CSS and Internal CSS Styling

In this approach, The elements utilize Tailwind CSS classes for styling, and the animations are applied using the defined internal CSS animations. We’ve added two new animations: slide-in-bottom and spin-scale. Each animation is defined using internal CSS. The first element slides in from the bottom with fading opacity, defined by the slideInBottom keyframes animation. The second element combines scaling and spinning effects

Example: The example below shows CSS Animations with Tailwind CSS.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS and Internal CSS Styling</title>
    <link href=
"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" 
          rel="stylesheet">
    <style>
        .slide-in-bottom {
            animation: slideInBottom 1s forwards;
        }

        @keyframes slideInBottom {
            0% {
                opacity: 0;
                transform: translateY(100%);
            }

            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .spin-scale {
            animation: spinScale 1s ease-in-out infinite alternate;
        }

        @keyframes spinScale {
            0% {
                transform: scale(1) rotate(0deg);
            }

            100% {
                transform: scale(1.2) rotate(360deg);
            }
        }
    </style>
</head>

<body class="bg-gray-100 flex justify-center 
             items-center h-screen">
    <div class="text-center">
        <div class="slide-in-bottom bg-blue-500
                    text-white px-4 py-2 rounded-md
                    shadow-md mb-4 cursor-pointer
                    hover:bg-blue-600">
            Slide In from Bottom</div>
        <div class="spin-scale bg-green-500 text-white
                    px-4 py-2 rounded-md shadow-md mb-4
                    cursor-pointer hover:bg-green-600">
            Spin and Scale</div>
    </div>
</body>

</html>