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

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

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

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

Синтаксис

animation-delay: <время>[, <время>]*

Значения

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

Ссылки

Официальный сайт W3C: https://www.w3.org/TR/css-animations-1/#animation-delay

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/animation-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: 460px;
		height: 50px;
		border: solid 4px red;
		}
				
		/* Задаем общие свойства анимации */ 
		.anim{
		animation-name: example_1;
		animation-duration: 2s;
		animation-timing-function: ease-in-out;
		animation-iteration-count: infinite;
		animation-direction: alternate;
		animation-fill-mode: backwards;
		}
		
		/* Задаем задержку анимации */ 
		.anim_delay_1{
		animation-delay: 1s;
		}
		
		.anim_delay_2{
		animation-delay: 2.5s;
		}
				
		.anim_delay_3{
		animation-delay: 4500ms;
		}		

		/* Анимируем ширину элемента */				
		@keyframes example_1{
			from{
			width: 0px;
			}
			
			to{
			width: 500px;
			}
		}
	</style>
	
</head>
<body>

	<div class="anim anim_delay_1">animation-delay: 1s</div>
	
	<div class="anim anim_delay_2">animation-delay: 2.5s</div>

	<div class="anim anim_delay_3">animation-delay: 4500ms</div>	
	
</body>	
</html>

Пример №1