Tailwind CSS - Transition Duration

Animating with Transition Duration

Smooth animations are key to a polished user interface. Tailwind’s transition duration utilities (duration-*) control the speed of CSS transitions, allowing you to create fluid and engaging interactive elements.

Understanding CSS Transitions

A complete CSS transition in Tailwind requires three core components:

• transition: This class enables the transition effect. You can specify which properties should be animated (e.g., transition-colors, transition-transform, or just transition for all properties).
• duration-*: This class sets how long the transition takes from the start state to the end state (e.g., duration-300 for 300ms).
• ease-*: This class defines the acceleration curve of the animation (the timing function), such as ease-in-out for a smooth start and end.

Transition Duration Classes

Tailwind provides a finely-tuned scale for duration values, from instant to a full second.

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;

Pro Tip: For custom durations, you can use arbitrary values, like duration-[250ms].

Interactive Button Example

The following example showcases how different duration values affect the feel of an interactive button. Notice how we combine transition, duration, ease, and state modifiers like hover:.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>Transition Duration Example</title>
</head>
<body class="bg-slate-100 flex items-center justify-center min-h-screen">
  <div class="grid grid-cols-1 sm:grid-cols-2 gap-8">

    <!-- Fast Transition -->
    <button class="px-6 py-3 font-semibold text-white bg-sky-500 rounded-lg shadow-md
                   transition-all duration-150 ease-in-out
                   hover:bg-sky-600 hover:scale-105">
      Fast (150ms)
    </button>

    <!-- Medium Transition -->
    <button class="px-6 py-3 font-semibold text-white bg-emerald-500 rounded-lg shadow-md
                   transition-all duration-300 ease-in-out
                   hover:bg-emerald-600 hover:scale-105">
      Medium (300ms)
    </button>

    <!-- Slow Transition -->
    <button class="px-6 py-3 font-semibold text-white bg-amber-500 rounded-lg shadow-md
                   transition-all duration-700 ease-in-out
                   hover:bg-amber-600 hover:scale-105">
      Slow (700ms)
    </button>

    <!-- Custom Duration -->
    <button class="px-6 py-3 font-semibold text-white bg-rose-500 rounded-lg shadow-md
                   transition-all duration-[2000ms] ease-in-out
                   hover:bg-rose-600 hover:scale-105">
      Very Slow (2s)
    </button>

  </div>
</body>
</html>

Performance and Best Practices

Performance: Animating transform and opacity is highly performant because they don’t trigger browser reflows or repaints. Avoid transitioning layout-affecting properties like width, height, margin, or padding on complex elements, as this can lead to janky animations.

User Experience: The ideal duration depends on the context. Short durations (100-200ms) are great for subtle feedback like color changes. Longer durations (300-500ms) work well for spatial movements, like a panel sliding into view. Very long transitions can make an interface feel sluggish.

Debugging Transitions

If your transition isn’t working, check for these common issues:

• Missing transition class: You must enable transitions with a transition-* utility.
• Missing duration-* or ease-* class: While browsers have defaults, explicitly setting these ensures consistent behavior.
• Applying to the wrong state: Ensure your hover:, focus:, or other state modifiers are correctly applied to the properties you want to change.