A transition tulajdonság

A transition tulajdonság egy rövidítés az átmenetekhez, lehetővé teszi, hogy egyszerre megadhassuk a transition-duration, transition-property, transition-timing-function és a transition-delay tulajdonságokat.

Szintaxis

selector {
	transition: érték;
}

A tulajdonságok sorrendje nem számít, azonban a végrehajtási idő (transition-duration) a késleltetés (transition-delay) elé kell, hogy kerüljön.

Értékek

Lásd a megfelelő tulajdonságokat. Alapértelmezett érték: all 0s ease 0s.

A none érték minden átmenetet visszavon (azok azonnal megtörténnek).

Példa

Vigyéda az egérmutatót a blokkra - 3 másodpercig nem fog semmi 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 elhúzzuk az egeret - újra 3 másodpercig nem fog semmi történni, majd a szélesség simán csökkenni fog az eredeti értékre:

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

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

Lásd még

a animation tulajdonság,
amellyel animációt készíthetünk