Omadus transition

Omadus transition on lühend sujuvateks üleminekuteks, võimaldab korraga määrata transition-duration, transition-property, transition-timing-function ja transition-delay.

Süntaks

valija {
	transition: väärtus;
}

Omaduste järjekord ei oma tähtsust, kuid kestvus (transition-duration) peab asuma enne viivitusi (transition-delay).

Väärtused

Vaata vastavaid omadusi. Vaikeväärtus: all 0s ease 0s.

Väärtus none tühistab kõik üleminekud (need toimuvad silmapilkselt).

Näide

Liigutage kursorit ploki kohale - 3 sekundi jooksul ei juhtu midagi (on seatud viivitus 3s), seejärel muudab see sujuvalt oma laiust 2 sekundiga. Kui seejärel kursor eemaldada - siis jälle 3 sekundit ei juhtu midagi, seejärel laius väheneb sujuvalt tagasi algväärtuseni:

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

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

Vaata ka

omadus animation,
mille abil saab teha animatsiooni