A transition-delay tulajdonság

A transition-delay tulajdonság beállítja a késleltetést az átmenet elindítása előtt transition.

Szintaxis

selector {
	transition-delay: idő s vagy ms ban;
}

Értékek

Érték	Leírás
`s`	Megadja az időt másodpercben (például `3s`). Tizedes értékek is megadhatók, például `0.5s` - fél másodperc.
`ms`	Megadja az időt ezredmásodpercben (például `3ms`). Egy másodperc az `1000` ezredmásodperc.

Alapértelmezett érték: 0s.

Példa

Vigyéda az egérmutatót a blokkra - 3 másodpercig semmi sem fog történni (van egy 3s késleltetés), majd a blokk simán megváltoztatja a szélességét 2 másodperc alatt. Ha ezután elvisszük az egeret - ismét 3 másodpercig semmi sem fog történni, majd a szélesség simán csökken az eredeti értékre:

<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;
}

Példa

Vigyéda az egérmutatót a blokkra - először megváltoztatja a szélességét 2 másodperc alatt, majd megváltoztatja a magasságát 4 másodperc alatt. A tulajdonságok egymás után fognak változni, mivel a magassághoz beállított késleltetés 3 másodperc (a szélességváltozás ideje). Ha elvisszük az egeret - akkor a változások fordított sorrendben történnek: először csökken a szélesség, majd csökken a magasság:

<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;
}

Lásd még

a transition-property tulajdonság,
amely megadja az átmenethez használt tulajdonság nevét
a transition-duration tulajdonság,
amely megadja az átmenet időtartamát
a transition-timing-function tulajdonság,
amely megadja az átmenet időzítési függvényét
a transition tulajdonság,
amely az átmenet rövidítése
a animation tulajdonság,
amellyel animáció készíthető