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

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?



Do you find this helpful?

Related articles