# Свойство transition-delay

Свойство `transition-delay` устанавливает задержку перед запуском плавного перехода `transition`.

## Синтаксис

`селектор { transition-delay: время в s или ms; }`

## Значения

Значение | Описание
--- | ---
`s` | Задает время в секундах (например `3s`). Можно задавать дробные значения, например, `0.5s` - половина секунды.
`ms` | Задает время в миллисекундах (например `3ms`). Одна секунда - это `1000` миллисекунд.

Значение по умолчанию: `0s`.

## Пример

Наведите мышкой на блок - `3` секунды ничего не будет происходить (стоит задержка `3s`), а затем он плавно изменит свою ширину за `2` секунды. Если затем убрать мышь - то снова `3` секунды ничего не будет происходить, а затем ширина плавно уменьшится до исходного значения:

`<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; }`

:

## Пример

Наведите мышкой на блок - он сначала изменит свою ширину за `2` секунды, а потом изменит свою высоту за `4` секунды. Свойства будут меняться последовательно, так как для высоты установлена в `3` секунды (время изменения ширины). Если убрать мышь - то изменения произойдут в обратном порядке: сначала уменьшится ширина, а потом уменьшится высота:

`<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; }`

:

## Смотрите также

- свойство `transition-property`,
  которое задает имя свойства для плавного перехода
- свойство `transition-duration`,
  которое задает длительность плавного перехода
- свойство `transition-timing-function`,
  которое задает временную функцию для плавного перехода
- свойство `transition`,
  которое является сокращением для плавного перехода
- свойство `animation`,
  с помощью которого можно сделать анимацию

← →
↑
en ru