# transition-delay property

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

## Syntax

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

## Values

Value | Description
--- | ---
`s` | Specifies a time in seconds (for example `3s`). You can set fractional values, for example, `0.5s` - half a second.
`ms` | Specifies a time in milliseconds (for example `3ms`). One second is `1000` milliseconds.

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:

`<div id="elem"></div>` `#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:

`<div id="elem"></div>` `#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

- the `transition-property` property
  that specifies a property name for a smooth transition
- the `transition-duration` property
  that sets a duration of a smooth transition
- the `transition-timing-function` property
  that specifies a timing function for a smooth transition
- the `transition` property
  that is a shorthand for a smooth transition
- the `animation` property
  that can be used to create animation

← →
↑
en ru