CSS :: Свойство transition-delay

css-свойство transition-delay (от англ. transition delay – задержка перехода) устанавливает время задержки перед началом перехода.

Характеристики

Значение по умолчанию: 0s.
Применяется: ко всем элементам, а также к псевдоэлементам ::before и ::after.
Наследуется: нет.
Анимируется: нет.
JavaScript: object.style.transitionDelay="value".

Синтаксис

transition-delay: <время> [, <время>, ...]

Значения

В качестве значения свойство принимает время, указанное в секундах (s) или миллисекундах (ms). Если указано нулевое значение времени (используется браузером по умолчанию), то переход начинается без задержек. Также разрешается использовать отрицательные значения, но с ними нужно быть осторожным, т.к. это может привести к изменению вида перехода в начальной стадии процесса. Разрешается перечислять через запятую несколько значений промежутков времени для каждого из свойств, перечисленных в качестве значения в transition-property.

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/css-transitions-1/#propdef-transition-delay

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/transition-delay

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
		div{
		margin-top: 2em;
		overflow: hidden;
		white-space: nowrap;
		padding: 1em;
		width: 200px;
		height: 50px;
		border: solid 4px red;
		cursor: pointer;
		}
				
		/* Задаем общие параметры перехода */
		.tran{
		transition-property: width, background-color;
		transition-timing-function: ease;
		transition-duration: 2s;
		}
		
		/* Задаем задержку перехода */ 
		.tran_delay_1{
		transition-delay: 0.01s;
		}
		
		.tran_delay_2{
		transition-delay: 0.7s;
		}
				
		.tran_delay_3{
		transition-delay: 1700ms;
		}

		div.tran:hover{
		background-color: #0000ff;
		width: 400px;
		}
		
	</style>
	
</head>
<body>

	<div>Наведите курсор на блоки!</div>
	
	<div class="tran tran_delay_1">transition-delay: 0.01s</div>
	
	<div class="tran tran_delay_2">transition-delay: 0.7s</div>

	<div class="tran tran_delay_3">transition-delay: 1700ms</div>	
	
</body>	
</html>

Пример №1