CSS transition-delay

The CSS transition-delay property is used to delay the transition. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{width: 120px; height: 120px; background-color: gray;
         transition-duration: 1s;
         transition-delay: 2s;}
      div:hover{width: 280px; background-color: blue;}
   </style>
</head>
<body>
   
   <div></div>
   
</body>
</html>

Output

Hover the mouse cursor over the box to see the transition effect.

Since I've defined 2s (2 seconds) delay for the transition. Therefore, it will take 2 seconds before changing the property value smoothly. It also takes 2 seconds before backing the element to its original state, smoothly.

Note - The transition-duration property is used to define the time to complete the transition.

CSS transition-delay Syntax

The syntax of transition-delay property in CSS, is:

transition-delay: x;

The value of x should be any of the following:

time - used to define custom delay to the transition. Either we can use s (for seconds) or ms (for milliseconds) to define the custom delay. For example: 1.2s, 1200ms, 3.4s, 3400ms etc.
initial - used to use the default value
inherit - used to use the value inherited by the parent element

CSS transition-delay Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{width: 120px; height: 120px; background-color: gray;
         transition-duration: 1s;}
         
      div.a{transition-delay: 1.2s;}
      div.b{transition-delay: 1200ms;}
      div.c{transition-delay: 2.4s;}
      div.d{transition-delay: 2400ms;}

      div:hover{border-radius: 50%; background-color: blue;}
   </style>
</head>
<body>
   
   <h2>transition-delay: 1.2s</h2>
   <div class="a"></div>

   <h2>transition-delay: 1200ms</h2>
   <div class="b"></div>

   <h2>transition-delay: 2.4s</h2>
   <div class="c"></div>

   <h2>transition-delay: 2400ms</h2>
   <div class="d"></div>
   
</body>
</html>

Output

transition-delay: 1.2s

transition-delay: 1200ms

transition-delay: 2.4s

transition-delay: 2400ms

CSS Online Test

« Previous Tutorial Next Tutorial »

Liked this post? Share it!