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>

Try it Yourself »

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>

Try it Yourself »

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.