Tailwind CSS - Transition & Animation


Tailwind CSS Transition and Animation are important utility classes which are used to apply different transitional effects and animations on an element. This classes helps to make the element attractive and effective. It consists of a list of tailwind css transition and animation classes such transition delay, transition duration, animation and many more.

Tailwind CSS Transition & Animation

Below mentioned topics can be used to apply an effective transition & animation on elements.

Topic Description Example
Tailwind CSS - Transition Property Trabsition property is a utility class that allows us to apply transitions to CSS properties.
Tailwind CSS - Transition Duration Transition Duration is a utility class that allows us to apply duration for CSS transition.
Tailwind CSS - Transition Timing Function Transition Timing Function Class is used to apply smooth transition Timing Function.
Tailwind CSS - Transition Delay Transition Delay is used to define the delay before CSS transition starts
Tailwind CSS - Animation Animation class is used to define the css animation for elements.

Example of Tailwind CSS Transition

In the following example we will cover some of the above mentioned transition classes

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8 bg-green-100">
    <h2 class="text-2xl font-bold mb-3">
        Tailwind CSS Transition Classes
    </h2>
    <p class="mb-3">
        The following example is showing the combine use 
        of transiton property, transition timing function 
        and transition delay classes.
    </p>
    <div class="grid grid-cols-2 gap-2">
        <div>
            <button class="bg-green-500 rounded-3xl p-4 w-44
                           transition-transform delay-300 ease-linear
                           hover:scale-90 hover:text-white 
                           hover:font-medium">
                Hover me :)
            </button>
        </div>
        <div>
            <button class="bg-green-500 rounded-3xl p-4 w-44
                           transition-transform delay-500 ease-linear
                           hover:scale-90 hover:text-white 
                           hover:font-medium">
                 Hover me :)
            </button>
        </div>
        <div>
            <button class="bg-green-500 rounded-3xl p-4 w-44
                           transition-transform delay-700 ease-linear 
                           hover:scale-90 hover:text-white 
                           hover:font-medium">
                 Hover me :)
            </button>
        </div>
        <div>
            <button class="bg-green-500 rounded-3xl p-4 w-44
                           transition-transform delay-1000 ease-linear
                           hover:scale-90 hover:text-white 
                           hover:font-medium">
                Hover me :)
            </button>
        </div>
    </div>
</body>
</html>

Example of Tailwind CSS Animation

In the following example we will cover some of the above mentioned Animation classes

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4 text-center">
    <h2 class="text-2xl font-bold mb-7">
        Tailwind CSS Animate Bounce Class
    </h2>
    <div class="flex items-center justify-center 
                hover:animate-bounce delay-500">
        <div class="w-28 h-28 rounded-full bg-yellow-400 relative
                    flex justify-center align-center">
            <div class="absolute top-8 left-6 w-4 h-4 bg-black 
                        rounded-full">
            </div>
            <div class="absolute top-8 right-6 w-4 h-4 bg-black 
                        rounded-full">
            </div>
            <div class="absolute bottom-4 w-14 h-6 bg-black
                        rounded-b-full">
            </div>
        </div>
    </div>
    <p>Hover the smile</p>
    
    <h2 class="text-2xl font-bold my-7">
        Tailwind CSS Animate Spin Class
    </h2>
    <div class="flex items-center justify-center 
                hover:animate-spin delay-500">
        <div class="w-28 h-28 rounded-full bg-yellow-400 relative
                    flex justify-center align-center">
            <div class="absolute top-8 left-6 w-4 h-4 bg-black 
                        rounded-full">
            </div>
            <div class="absolute top-8 right-6 w-4 h-4 bg-black 
                        rounded-full">
            </div>
            <div class="absolute bottom-4 w-14 h-6 bg-black
                        rounded-b-full">
            </div>
        </div>
    </div>
    <p>Hover the smile</p>
</body>
</html>