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.

A negative value will also begin the transition effect immediately.

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.

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

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

An example where the transition-delay of the position waits 2 seconds to start:

Example

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

Practice Your Knowledge

Which statement is correct about transition-delay property?




Related articles