Tailwind CSS - Bonus
Tailwind CSS - Using with Preprocessors
Tailwind CSS - Optimizing for Production

Tailwind CSS - Transition & Animation

Quiz

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.	Try It
Tailwind CSS - Transition Duration	Transition Duration is a utility class that allows us to apply duration for CSS transition.	Try It
Tailwind CSS - Transition Timing Function	Transition Timing Function Class is used to apply smooth transition Timing Function.	Try It
Tailwind CSS - Transition Delay	Transition Delay is used to define the delay before CSS transition starts	Try It
Tailwind CSS - Animation	Animation class is used to define the css animation for elements.	Try It

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>

Print Page