Omadus transition-property

Omadus transition-property määrab omaduse, mida animeeritakse sujuba üleminekuga transition. Väärtuseks tuleks anda CSS-i omaduse nimi, mida animeeritakse. Kui määrata väärtuseks all (see on vaikimisi seatud) - animeeritakse kõik omadused korraga.

Süntaks

valija {
	transition-property: väärtus;
}

Näide

Hõljutage kursorit ploki kohal - see muudab sujuvalt oma laiust, kuna transition-property omab väärtust width:

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

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

Näide . Väärtus all

Selles näites on transition-property väärtuseks all - seetõttu muutuvad sujuvalt kõik olekus hover kirjutatud omadused (meie puhul see on width ja height). Kõik muutused toimuvad ühe ajaga, mis on määratud omaduses transition-duration:

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

#elem {
	border: 1px solid black;
	transition-duration: 2s;
	transition-property: all;
	height: 25px;
	width: 100px;
}
#elem:hover {
	height: 50px;
	width: 400px;
}

Vaata ka

omadus transition-duration,
mis määrab sujuva ülemingu kestuse
omadus transition-delay,
mis määrab viivituse enne sujuva ülemikku
omadus transition-timing-function,
mis määrab sujuva ülemiku ajafunktsiooni
omadus transition,
mis on sujuva ülemiku lühend
omadus animation,
mille abil saab teha animatsiooni