Уласцівасць 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,
з дапамогай якога можна зрабіць анімацыю