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

Tailwind CSS - Transition Duration

Quiz

Tailwind CSS Transition Duration is a utility class that allows us to apply duration for CSS transition.

Tailwind CSS Transition Duration Classes

The following is the list of Tailwind CSS Transition Duration Classes that are used to apply smooth transition duration.

Class	CSS Properties
duration-0	transition-duration: 0s;
duration-75	transition-duration: 75ms;
duration-100	transition-duration: 100ms;
duration-150	transition-duration: 150ms;
duration-200	transition-duration: 200ms;
duration-300	transition-duration: 300ms;
duration-500	transition-duration: 500ms;
duration-700	transition-duration: 700ms;
duration-1000	transition-duration: 1000ms;

Functionality of Tailwind CSS Transition Duration Classes

duration-*: Class is used to add duration for transition properties. {*} here specifying the different transition-duration value that can be set as per the need.

Tailwind CSS Transition Duration Example

The following example will illustrate the different transitional effects on specified transition duration.

Example

<!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 Duration Classes 
    </h2>
    <div class="grid grid-cols-2 gap-2">
        <div>
            <button class="bg-green-500 rounded-3xl p-4 transition-transform 
                            duration-100 hover:scale-90 hover:text-white 
                            hover:font-medium">
                Hover :Duration-100
            </button>
        </div>
        <div>
            <button class="bg-green-500 rounded-3xl p-4 transition-colors 
                            duration-300 hover:text-white hover:font-medium
                            hover:bg-green-700">
                Hover :Duration-300
            </button>
        </div>
        <div>
            <button class="bg-green-500 rounded-3xl p-4 transition
                            duration-700 hover:opacity-30 hover:text-white
                            hover:font-medium">
                Hover :Duration-700
            </button>
        </div>
        <div>
            <button class="bg-green-500 rounded-3xl p-4 transition duration-1000
                            hover:text-white hover:font-medium">
                Hover :Duration-1000
            </button>
        </div>
    </div>
</body>
</html>

Print Page