The transition-delay property

The transition-delay property sets a delay before starting a smooth transition.

Syntax

cssselector {
  transition-delay: duration in s or ms;
}

Values

Default value: 0s.

Example

Hover your mouse over the block - nothing will happen for 3 seconds (there is a delay of 3s), and then it will smoothly change its width in 2 seconds. If you then remove the mouse - then again nothing will happen for 3 seconds, and then the width will smoothly decrease to the original value:

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  transition-duration: 2s;
  transition-property: width;
  transition-delay: 3s;
  height: 50px;
  width: 100px;
}
#elem:hover {
  width: 400px;
}

Результат:

Example

Hover your mouse over the block - it will first change its width in 2 seconds, and then change its height in 4 seconds. The properties will change sequentially, since the height is set to 3 seconds (the width change time). If you remove the mouse, the changes will occur in the reverse order: first the width will decrease, and then the height will decrease:

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  transition-duration: 2s, 4s;
  transition-property: width, height;
  transition-delay: 0s, 3s;
  width: 100px;
  height: 25px;
}
#elem:hover {
  width: 400px;
  height: 50px;
}

Результат:

See also