CSS Property transition-delay

The transition-delay property defines a length of time to delay the start of a transition.

.example {
    transition-delay: 5s;
}

Summary

Initial value: 0
Inherited: no
CSS Version: CSS3
JavaScript syntax: object.style.transitionDelay="2s"
Animatable: no

CSS Syntax

transition-delay: time;

Property Values

time: set time in seconds or milliseconds to wait before starting the transition effect

Browser compatibility


`transition-delay`	Yes	10.0	Yes	Yes	Yes

Example

<!DOCTYPE html>
<html>
<head>
<style> 
div {<!--  www . j  a  v  a2s.c  om-->
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition-property: width; /* Safari */
    -webkit-transition-duration: 5s; /* Safari */
    -webkit-transition-delay: 2s; /* Safari */
    transition-property: width;
    transition-duration: 5s;
    transition-delay: 2s;
}

div:hover {
    width: 300px;
}
</style>
</head>
<body>

<div></div>

<p>Hover over the div element above, to see the transition effect.</p>

</body>
</html>

Click to view the demo

Example 2

<!DOCTYPE html>
<html>
<style>
.box {<!--  w  ww .j  a v a 2  s. c o m-->
  width: 150px;
  height: 150px;
  background: goldenrod;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  -webkit-transition-delay: 2s;
  -moz-transition-delay: 2s;
  -o-transition-delay: 2s;
  transition-delay: 2s;
}

.box:hover {
  background-color: blue;
  cursor: pointer;
}

.uni {
   -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
  -webkit-transition-property: background-color;
  -moz-transition-property: background-color;
  -o-transition-property: background-color;
  transition-property: background-color;
}
</style>
</head>
<body>
<div class="box uni"></div>
</body>
</html>

Click to view the demo

Example 3

<!DOCTYPE html>
<html>
<style>
.box {<!--   w w  w.  jav a2 s  . c  o  m-->
  width: 150px;
  height: 150px;
  background: goldenrod;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  -webkit-transition-delay: -1s;
  -moz-transition-delay: -1s;
  -o-transition-delay: -1s;
  transition-delay: -1s;
}

.box:hover {
  background-color: blue;
  cursor: pointer;
}

.uni {
   -webkit-transition-duration: 3s;
  -moz-transition-duration: 3s;
  -o-transition-duration: 3s;
  transition-duration: 3s;
  -webkit-transition-property: background-color;
  -moz-transition-property: background-color;
  -o-transition-property: background-color;
  transition-property: background-color;
}
</style>
</head>
<body>
<div class="box uni"></div>
</body>
</html>

Click to view the demo