Tailwind CSS - Base Styles
Tailwind CSS - Preflight

Tailwind CSS - Transitions & Animation
Tailwind CSS - Transition Property
Tailwind CSS - Transition Duration
Tailwind CSS - Transition Timing Function
Tailwind CSS - Transition Delay
Tailwind CSS - Animation

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

Tailwind CSS - Transition Delay

Quiz

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




    


    
        Tailwind CSS Transition Delay Classes

Print Page

Advertisements