Tailwind CSS - Transition Duration


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>