transition-duration

Definition

The transition-duration CSS property is used to specify the duration or length of time it takes for a CSS transition to complete. It determines how long the transition effect lasts when a property change occurs on an element.

The transition-duration property accepts a time value or the 0s keyword:

A time value specifies the duration in seconds (s) or milliseconds (ms) that the transition effect should take to complete. For example, transition-duration: 0.5s; sets the transition duration to 0.5 seconds.
The 0s keyword indicates that there is no transition effect, meaning the property change occurs instantly without any visual transition.

Here’s an example:

.button {
  transition-duration: 0.3s;
}

In this example, the .button class sets the transition-duration property to 0.3s, specifying that the transition effect should take 0.3 seconds to complete when a property change occurs.

It’s important to note that the transition-duration property is applied to individual properties being transitioned. If multiple properties have different transition durations, each property will have its own timing.

The transition-duration property is commonly used in combination with other transition-related properties, such as transition-property, transition-delay, and transition-timing-function. Together, these properties allow for the creation of smooth and controlled transitions between different states of an element.

By adjusting the transition duration, you can control the speed and timing of the transition effect. Shorter durations create faster transitions, while longer durations result in slower and more gradual changes.

Remember to consider the overall user experience and ensure that the transition duration is appropriate for the specific transition effect and the context in which it occurs. Very short durations can make the transition feel abrupt, while excessively long durations can cause delays and hinder the user experience.

Syntax

.card {
  transition-duration: 180ms;
}

Values

<time> per transitioned property.
Comma-separated list to map durations to multiple properties.

Practical Examples

.card {
  transition-property: transform, box-shadow;
  transition-duration: 180ms;

Control the time it takes for transitions to run.

HTML

Tailwind duration

Code

<div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm transition-transform duration-150 hover:-translate-y-1">Tailwind duration</div>

Tips & Best Practices

Use consistent durations for similar interactions to build rhythm.
Mix durations (e.g., shorter for hover, longer for modals).

Accessibility & UX Notes

Very fast transitions (<100ms) may feel abrupt; extremely long ones delay interaction.

Browser Support

Same support as transition shorthand.

transition-delay to stagger start.
animation-duration for keyframes.