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

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

CSS свойство transition-delay определяет, когда эффект перехода начнется (выступает в роли задержки начала эффекта).

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

Свойство	Chrome	Firefox	Opera	Safari	IExplorer	Edge
transition-delay	26.0 4.0 -webkit-	16.0 4.0 -moz-	12.1 10.5 -o-	6.1 3.1 -webkit-	10.0	12.0

CSS синтаксис:

transition-delay:"time(s/ms) | initial | inherit";

JavaScript синтаксис:

object.style.transitionDelay = "300ms"

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

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

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Нет.

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

<!DOCTYPE html>
<html>
<head>
<title>Задержка эффекта перехода в CSS</title>
<style> 
div {
width : 90px; /* устанавливаем ширину блока */
height : 90px; /* устанавливаем высоту блока */
background-color : yellow; /* устанавливает цвет заднего фона */
border : 5px dashed black; /* устанавливает пунктирную границу размером 5px черного цвета */
display : inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
margin-right : 15px; /* устанавливаем величину отступа от правого края элемента */
}
div:hover {
height : 200px; /* устанавливаем высоту блока при наведении на элемент (псевдокласс :hover) */
}
.test   {
transition-duration : 5s;  /* устанавливаем длительность перехода равную 5 секундам */
transition-delay : 1s;  /* устанавливаем задержку перехода длительностью 1 секунда */
}
.test2   {
transition-duration : 2s;  /* устанавливаем длительность перехода равную 2 секундам */
transition-delay : 2s;  /* устанавливаем задержку перехода длительностью 2 секундч */
} 
.test3   {
transition-duration : 400ms;  /* устанавливаем длительность перехода равную 400 миллисекундам (0,4 секунды) */
transition-delay : 900ms;  /* устанавливаем задержку перехода длительностью 900 миллисекунд (0,9 секунды) */
} 
</style>
</head>
	<body>
		<div class = "test">delay 1s</div>
		<div class = "test2">delay 2s</div>
		<div class = "test3">delay 900ms</div>
	</body>
</html>

Задержка эффекта перехода в CSS (свойство transition-delay).

Установим, чтобы некоторые свойства получили переходный эффект и применим для них разную временную задержку:

<!DOCTYPE html>
<html>
<head>
<title>Переходные эффекты для конкретных свойств в CSS</title>
<style> 
div {
width : 150px; /* устанавливаем ширину блока */
height : 120px; /* устанавливаем высоту блока */
background-color : yellow; /* устанавливаем цвет заднего фона */
border : 5px dashed black; /* устанавливаем пунктирную границу размером 5px черного цвета */
}
div:hover {
width : 100%; /* устанавливаем ширину блока при наведении на элемент (псевдокласс :hover) */
height : 200px; /* устанавливаем высоту блока при наведении на элемент */
background-color : rgba(255,0,0,.7); /* устанавливаем цвет заднего фона при наведении */
}
.test   {
transition-duration : 5s;  /* устанавливаем длительность перехода равную 5 секундам */
transition-delay : 3s, 1s;  /* устанавливаем задержку перехода (1 значение = 1 значение свойства transition-property (width), 2 значение = 2 значение свойства transition-property (height)  */
transition-property : width, height;  /* устанавливаем свойства, которые получат переходный эффект (свойство background-color изменит цвет сразу в отличие от перечисленных в этом свойстве значений) */
}
</style>
</head>
<body>
<div class = "test">
duration: 5s;<br>
delay: 3s, 1s;<br>
property: width, height;
</div>
</body>
</html>

Переходные эффекты для конкретных свойств в CSS (свойство transition-property).

CSS свойства