Tailwind CSS - Transition Delay

Previous
Quiz
Next

Tailwind CSS transition Delay is a utility that is used to define the delay before CSS transition starts.

Tailwind CSS Transition Delay Classes

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

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

Functionality of Tailwind CSS Transition Delay Classes

  • delay-*: Class is used to add delay before transition effects start. {*} here specifying the different transition-delay value that can be set as per the need.

Tailwind CSS Transition Delay Example

The following example will illustrate the different transitional delay for specified transition effect.

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 Delay Classes
    </h2>
    <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 :Delay-300
            </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 :Delay-500
            </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 :Delay-700
            </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 :Delay-1000
            </button>
        </div>
    </div>
</body>
</html>
Print Page
Previous
Next