CSS transition-duration Property

What You’ll Learn

The transition-duration property controls how long a CSS transition takes — from instant snaps to slow, gradual changes. It is essential for polished hover and state-change effects.

Introduction

The transition-duration property in CSS is used to define the length of time that a transition animation takes to complete. It is part of the CSS Transitions module and allows you to control how long an element should take to change from one style to another.

This property can be particularly useful for creating smooth, visually appealing transitions for various user interactions.

Definition and Usage

Set transition-duration alongside transition-property (or use the transition shorthand). Without a positive duration, changes happen instantly because the default is 0s.

📝 Syntax

The syntax for the transition-duration property is simple. You specify the duration of the transition in seconds (s) or milliseconds (ms).

element {
  transition-duration: time;
}

Here, time represents the duration of the transition.

Basic Example

.box {
  transition-property: background-color;
  transition-duration: 2s;
}

.box:hover {
  background-color: red;
}

Syntax Rules

• Time values must use s (seconds) or ms (milliseconds).
• Negative values are not allowed.
• Default is 0s — no visible transition unless you set a positive duration.
• In the transition shorthand, duration is the second value.
• The property is not inherited.

Related Properties

• transition — shorthand for all transition longhands
• transition-property — which properties animate
• transition-delay — wait time before the transition starts
• transition-timing-function — speed curve during the transition
• animation-duration — duration for @keyframes animations

🎯 Default Value

The default value of the transition-duration property is 0s, meaning no transition effect unless you specify a positive duration.

💎 Property Values

The transition-duration property accepts positive time values.

When to Use transition-duration

Choose duration based on the element size and interaction type:

• Buttons and links — Short durations (0.1–0.3s) feel responsive.
• Cards and panels — Medium durations (0.3–0.5s) for hover lifts and shadows.
• Large background changes — Longer durations (0.5–1s+) for dramatic fades.
• Micro-interactions — Very short (0.05–0.15s) for active/pressed states.

Examples Gallery

In this example, we’ll apply a transition duration to a div element that changes its background color on hover.

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: blue;
    transition-duration: 2s;
  }
  .box:hover {
    background-color: red;
  }
</style>

<div class="box"></div>

.fast .bar { transition-duration: 0.2s; }
.slow .bar { transition-duration: 2s; }

.demo:hover .bar { transform: scale(1.3); }

.link {
  transition: color 0.6s ease;
}

.link:hover {
  color: #059669;
}

.btn {
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.btn:active {
  transition-duration: 0.05s;
}

♿ Accessibility

• Reduced motion — Set transition-duration: 0.01ms or disable transitions when prefers-reduced-motion: reduce is set.
• Do not slow essential feedback — Form errors and loading states should not use long durations.
• Focus parity — Apply the same durations on :focus-visible as on hover.
• Avoid motion sickness — Very long transitions on large areas can disorient some users.

duration vs delay

transition-duration controls how long the animation runs. transition-delay controls how long to wait before it starts. Both use time units but serve different roles.

.box {
  transition-property: opacity;
  transition-duration: 0.5s;  /* runs for half a second */
  transition-delay: 0.3s;     /* waits 0.3s before starting */
}

💡 Best Practices