CSS transition-duration Property

Definition and Usage

The transition-duration property sets how long a CSS transition takes to finish. The initial value is 0s, so changes are instant until you set a positive time.

Use a <time> in seconds (s) or milliseconds (ms). It is not inherited. Pair it with transition-property (what changes), transition-timing-function (easing), and transition-delay (wait time), or the transition shorthand.

CSS Syntax

Examples: transition-duration: 0.3s; · transition-duration: 300ms; · transition-duration: 1s, 200ms;

Property Values

How to Use transition-duration

Pick what changes, then decide how long that change should take.

1. Choose a property that can transition (for example background-color or transform).
2. Set transition-property (or use the transition shorthand).
3. Set transition-duration to a positive time such as 0.25s or 250ms.
4. Trigger a state change (hover, class toggle, focus) and watch the timed change.

Live Preview

Hover or focus the box. Only transition-duration changes — longer values take more time to finish.

CSS Examples

Each snippet focuses on transition-duration. Other transition pieces are only there so a change can run. Use Try It Yourself for a live editor.

<style>
  button {
    background: #2563eb;
    color: #fff;
    border: 0;
    padding: 12px 16px;
    transition-property: background-color;
    transition-duration: 0.5s;
  }
  button:hover,
  button:focus-visible {
    background: #16a34a;
  }
</style>

<button type="button">Hover me</button>

<style>
  button {
    background: #2563eb;
    color: #fff;
    border: 0;
    padding: 12px 16px;
    transition-property: background-color;
    transition-duration: 200ms;
  }
  button:hover,
  button:focus-visible {
    background: #16a34a;
  }
</style>

<button type="button">Quick hover</button>

<style>
  button {
    background: #2563eb;
    color: #fff;
    border: 0;
    padding: 12px 16px;
    transition-property: background-color, transform;
    transition-duration: 200ms, 1s;
  }
  button:hover,
  button:focus-visible {
    background: #16a34a;
    transform: translateX(12px);
  }
</style>

<button type="button">Color fast, move slow</button>

Key Takeaways