Eienskap transition-property

Die eienskap transition-property stel die eienskap in wat geanimeer sal word met 'n sagte oorgang transition. As waarde moet die naam van die CSS-eienskap oorgedra word wat geanimeer sal word. As die waarde all gestel word (dit is standaard) - sal alle eienskappe gelyktydig geanimeer word.

Sintaksis

selektor {
	transition-property: waarde;
}

Voorbeeld

Beweeg die muis oor die blok - dit sal gladjes sy wydte verander, aangesien transition-property die waarde width het:

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

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

Voorbeeld . Waarde all

In hierdie voorbeeld het transition-property die waarde all - daarom sal alle eienskappe wat vir die toestand hover geskryf is, gladjes verander (in ons geval is dit width en height). Alle veranderinge sal plaasvind oor een tydperk, wat gestel is in 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;
}

Sien ook

die eienskap transition-duration,
wat die duur van die sagte oorgang stel
die eienskap transition-delay,
wat die vertraging voor die sagte oorgang stel
die eienskap transition-timing-function,
wat die tydsfunksie vir die sagte oorgang stel
die eienskap transition,
wat die afkorting vir die sagte oorgang is
die eienskap animation,
waarmee jy animasie kan maak