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

Определение и применение

CSS свойство animation-delay определяет задержку для запуска анимации. Задержка анимации задается в секундах (s) или миллисекундах (ms).

Обращаю Ваше внимание на то, что, как правило, удобнее использовать сокращенное обозначение свойства анимации - animation css3 , чтобы установить все свойства анимации в одном объявлении.

Поддержка браузерами

Свойство	Chrome	Firefox	Opera	Safari	IExplorer	Edge
animation-delay	43.0 4.0 -webkit-	16.0 5.0 -moz-	30.0 15.0 -webkit-	9.0 4.0 -webkit-	10.0	12.0

CSS синтаксис:

animation-delay:"time | initial | inherit";

/* несколько значений указываются через запятую */

animation-name:"animationName1, animationName2, animationName3";
animation-delay:"1s, 2s, 3s";

JavaScript синтаксис:

object.style.animationDelay = "2s"

Значения свойства

Значение	Описание
time	Определяет количество секунд(s) или миллисекунд(ms), по истечению которых начнется воспроизведение анимации. Значение по умолчанию 0. Допускаются отрицательные значения - анимация начнет воспроизводиться без задержки, но со смещением равному указанному значению (т.е. если вы укажите -5s, то анимация будет воспроизведена без задержки, и с того момента как будто она уже длится 5 секунд). Допускается указывать несколько значений, перечисленных через запятую (для каждой отдельной анимации).
initial	Устанавливает свойство в значение по умолчанию.
inherit	Указывает, что значение наследуется от родительского элемента.

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
	<title>Задержка анимации в CSS</title>
<style> 
div {
width: 75px; /* устанавливаем ширину блока */
height: 75px;  /* устанавливаем высоту блока */
border-radius: 100%;  /* определяем форму углов элемента */
position: relative;  /* элемент с относительным позиционированием  */
animation-name: iliketomoveit;  /* задаём имя анимации (соответствует имени назначенному в ключевых кадрах)  */
animation-duration: 5s;  /* задаём продолжительность анимации */
animation-iteration-count: infinite;  /* указываем, что анимация будет повторяться бесконечно  */
} 
.test {
animation-delay: -500ms; /* устанавливаем отрицательную задержку равную -500ms (без задержки со смещением)  */ 
}
.test2 {
animation-delay: 1500ms; /* устанавливаем задержку анимации равную 1500 миллисекунд */ 
}
.test3 {
animation-delay: 2s; /* устанавливаем задержку анимации равную 2 секунды */ 
}
@keyframes iliketomoveit {
	0%   {left: 0px;} 
	25%  {left: 400px; background: red;} 
	75%  {left: 200px;} 
	100% {left: 0px; background: black;} 
} 
</style>
</head>
	<body>
		<div class = "test">-500ms</div>
		<div class = "test2">1500ms</div>
		<div class = "test3">2s</div>
	</body>
</html>

CSS свойства