Tailwind CSS transition-duration Property

The transition-duration property in Tailwind CSS is used to specify the time duration for the CSS transitions to take place.

Syntax

The transition-duration property has the following syntax:

transition-duration: {duration-0} | {duration-75} | ... | {duration-1000} | {duration-none}

where:

• {duration-0} to {duration-1000} are pre-defined duration values in milliseconds. They range from 0ms to 1000ms in increments of 75ms.
• {duration-none} sets the transition to take place instantly with no duration.

Example

Let's take a look at an example:

<button class="bg-blue-500 hover:bg-red-500 transition-all duration-500 ease-in-out text-white font-bold py-2 px-4 rounded">
  Click me!
</button>

In this example, we have a button with a blue background color that transitions to a red background color when hovered over. The transition-all class specifies that all CSS properties should be transitioned, and the duration-500 class specifies that the transition should take 500 milliseconds.

Output

When the button is hovered over, the background color smoothly transitions from blue to red over a 500 millisecond duration.

Explanation

The transition-duration property is used to specify the duration of the CSS transitions. By default, all properties with a change will take the same amount of time to transition.

In the above example, we defined a transition from a blue background to a red background with a duration-500 class. Thus, the transition takes place smoothly over a period of 500 milliseconds.

Use

The transition-duration property is generally used in conjunction with the transition-property and transition-timing-function properties to create animated effects in response to user interactions.

Important Points

• The transition-duration property defines the duration over which a transition occurs while changing an element’s state.
• The value of the transition-duration property is specified in milliseconds.
• The transition-duration property is used with the transition shorthand property which is a shorthand property for the five transition properties: transition-property, transition-duration, transition-timing-function, transition-delay, transition-timing-function.

Summary

In summary, the transition-duration property in Tailwind CSS specifies the time duration for the CSS transitions to take place. It is used to create animated effects in response to user interactions. The value of the property is specified in milliseconds, and can be used in conjunction with other transition properties to create complex transitions.