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

Данное свойство входит в свойство-сокращение transition.

См. также transition-duration, transition-property, transition-timing-function.

См. также CSS3 анимацию animation.

Синтаксис

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

Для анимирования нескольких CSS свойств следует задавать значения через запятую:

селектор {
	transition-duration: 2s, 3s;
}

Значения

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

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

Примеры

Пример

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

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

Результат выполнения кода:

Пример

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

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

Результат выполнения кода: