Својство transition-delay

Својство transition-delay поставља одлагање пре покретања глатког прелаза transition.

Синтакса

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

Вредности

Вредност	Опис
`s`	Одређује време у секундама (на пример `3s`). Могуће је задати разломљене вредности, на пример, `0.5s` - пола секунде.
`ms`	Одређује време у милисекундама (на пример `3ms`). Једна секунда је `1000` милисекунди.

Подразумевана вредност: 0s.

Пример

Превуците мишем преко блока - 3 секунде ништа се неће дешавати (постављено је одлагање од 3s), а затим ће он глатко променити своју ширину за 2 секунде. Ако затим уклоните миш - поново ће 3 секунде ништа бити, а затим ће се ширина глатко смањити на почетну вредност:

<div id="elem"></div>

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

Пример

Превуците мишем преко блока - он ће прво променити своју ширину за 2 секунде, а затим променити своју висину за 4 секунде. Својства ће се мењати узастопно, јер је за висину постављено одлагање од 3 секунде (време промене ширине). Ако уклоните миш - промене ће се десити обрнутим редоследом: прво ће се смањити ширина, а затим висина:

<div id="elem"></div>

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

Погледајте такође

својство transition-property,
које задаје име својства за глатки прелаз
својство transition-duration,
које задаје трајање глатког прелаза
својство transition-timing-function,
које задаје временску функцију за глатки прелаз
својство transition,
које је скраћеница за глатки прелаз
својство animation,
помоћу којег можете направити анимацију