CSS transition-delay Property

The transition-delay CSS property specifies when the transition effect should start.

The transition-delay property is one of the CSS3 properties.

The default value is 0s which means that the transition effect starts immediately.

The time offset which is specified with the transition-delay property offsets the transition animation by the specified amount. The offset can be a negative value as well. When a negative time offset is used as a value for the transition-delay property the transition will execute the changed moment of the property, but it will appear that the execution has started at the specified offset.

The value can be either a valid time value defined in seconds or milliseconds or a comma-separated list of time values specified for a single element. When we have a comma-separated list of property names, this list is commonly mapped to the values of other transition-related properties (transition-duration, transition-timing-function, transition-property).

For maximum browsers compatibility extensions such as -webkit- for Safari, Google Chrome, and Opera (newer versions), -moz- for Firefox, -o- for older versions of Opera are used with this property.

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;

Example of the transition-delay property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 150px;
        height: 150px;
        background: #8ebf42;
        -webkit-transition-property: width;
        -moz-transition-property: width;
        -o-transition-property: width;
        transition-property: width;
        -webkit-transition-duration: 1s;
        -moz-transition-duration: 1s;
        -o-transition-duration: 1s;
        transition-duration: 1s;
        -webkit-transition-delay: 0s;
        -moz-transition-delay: 0s;
        -o-transition-delay: 0s;
        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>

Example of the transition-delay property with 2 seconds of delay:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 150px;
        height: 150px;
        background: #8ebf42;
        -webkit-transition-property: width height;
        -moz-transition-property: width height;
        -o-transition-property: width height;
        transition-property: width height;
        -webkit-transition-duration: 3s;
        -moz-transition-duration: 3s;
        -o-transition-duration: 3s;
        transition-duration: 3s;
        -webkit-transition-delay: 2s;
        -moz-transition-delay: 2s;
        -o-transition-delay: 2s;
        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>

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.

Browser support

chrome edge firefox safari opera
26.0+
1.0 -webkit-
12.0+ 16.0+
4.0 -moz- 49.0 -webkit-
6.1+
3.0 -webkit-
12.1+
15.0 -webkit-

Practice Your Knowledge

Which statement is correct about transition-delay property?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?