CSS transition-delay Property

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

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

The specified time offset delays the start of the animation. Negative values are also allowed. A negative delay causes the transition to start partway through its animation timeline.

The value can be a time in seconds or milliseconds, or a comma-separated list of time values. When multiple values are provided, they are mapped to the corresponding properties in the transition-property list. This property is also included in the transition shorthand.

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

css

transition-delay: time | initial | inherit;

Example of the transition-delay property:

CSS transition-delay code example

html

<!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>

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

CSS transition-delay another code example

html

<!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>

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.

CSS transition-delay Property ​

Syntax ​

Example of the transition-delay property: ​

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