CSS transition-delay Property - Usage, Syntax, Examples

The transition-delay CSS property defines how long to wait before a transition effect starts once the triggering change happens. It is one of the four longhand properties that make up the transition shorthand, alongside transition-property, transition-duration, and transition-timing-function.

This page covers the property's values, how positive and negative delays behave, how to set a separate delay for each animated property, and the most common ways it is used in real interfaces. It is one of the CSS3 properties.

How the delay works

The default value is 0s, which means the transition effect starts immediately when the property value changes (for example, on :hover).

A positive delay offsets the start. With transition-delay: 2s, nothing visible happens for two seconds; only then does the property begin animating from its old value to its new value over the transition-duration.

A negative delay is allowed and behaves differently: the transition starts immediately, but it begins partway through its timeline, as if it had already been running for that amount of time. So transition-duration: 4s with transition-delay: -2s jumps straight to the halfway point and finishes in the remaining two seconds.

The delay does not repeat — unlike an animation iteration, a transition runs once per change, so the delay applies only to the single run that the change triggers.

Info

Modern browsers support this property natively without vendor prefixes.

Initial Value	0s
Applies to	All elements, ::before and ::after pseudo-elements.
Inherited	No.
Animatable	No.
Version	CSS3
DOM Syntax	object.style.transitionDelay = "3s";

Syntax

transition-delay: time | initial | inherit;

Basic example

This box grows when you hover it. The delay is 0s, so the growth begins immediately — change it to 1s in the editor to feel the difference.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 150px;
        height: 150px;
        background: #8ebf42;
        transition-property: width;
        transition-duration: 1s;
        transition-delay: 0s;
      }
      div:hover {
        width: 300px;
      }
    </style>
  </head>
  <body>
    <h2>Transition-delay property example</h2>
    <p>Hover over the element to see the effect.</p>
    <div></div>
  </body>
</html>

Try it Yourself »

Example with 2 seconds of delay

Here the box waits two full seconds after you hover before it starts growing. Note that transition-property lists multiple properties as a comma-separated list (width, height).

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 150px;
        height: 150px;
        background: #8ebf42;
        transition-property: width, height;
        transition-duration: 3s;
        transition-delay: 2s;
      }
      div:hover {
        width: 300px;
        height: 300px;
      }
    </style>
  </head>
  <body>
    <h2>Transition-delay property example</h2>
    <p>Hover over the element and wait 2 seconds to see the effect.</p>
    <div></div>
  </body>
</html>

Try it Yourself »

A different delay for each property

When you animate several properties, you can give each one its own delay by listing the values in the same order as in transition-property. The list of delays is matched up with the list of properties: here width starts right away, while background-color waits one second.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 150px;
        height: 150px;
        background: #8ebf42;
        transition-property: width, background-color;
        transition-duration: 1s, 1s;
        transition-delay: 0s, 1s;
      }
      div:hover {
        width: 300px;
        background-color: #1c8470;
      }
    </style>
  </head>
  <body>
    <h2>Staggered transition-delay</h2>
    <p>Hover: the width grows first, then the color changes a second later.</p>
    <div></div>
  </body>
</html>

Common use cases

Staggering animations so several elements (or several properties of one element) move one after another instead of all at once, creating a more polished feel.
Hover-intent menus. A small delay on a drop-down's collapse (often paired with a delay on visibility) keeps the menu open briefly so a slightly off-target mouse move doesn't close it.
Negative delays to start an effect already "in progress," useful when you want an element to land at a specific point of its transition immediately.

Values

Value	Description
time	Specifies how many seconds or milliseconds a transition effect should wait to start. The default value is 0s.
initial	Makes the property use its default value.
inherit	Inherits the property from its parents element.

Practice

Which statement is correct about transition-delay property?

specifies when the transition effect should end.The default value is 0s which means that the transition effect will not start.A negative value will begin the transition effect immediately.