Својство 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,
со кое може да се направи анимација