A transition-property tulajdonság

A transition-property tulajdonság beállítja azt a tulajdonságot, amely átmeneti effektussal lesz animálva transition. Értékeként egy olyan CSS tulajdonság nevét kell megadni, amely animálva lesz. Ha a all értéket adjuk meg (alapértelmezett érték) - akkor az összes tulajdonság egyszerre lesz animálva.

Szintaxis

szelektor {
	transition-property: érték;
}

Példa

Vigyétek az egeret a blokk fölé - fokozatosan megváltoztatja a szélességét, mivel a transition-property értéke width:

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

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

Példa . Az all érték

Ebben a példában a transition-property értéke all - ezért fokozatosan változni fognak az összes tulajdonság, amely a hover állapothoz van megadva (esetünkben ez a width és a height). Az összes változás ugyanannyi idő alatt fog megtörténni, amely a transition-duration-ban van megadva:

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

Lásd még

a transition-duration tulajdonság,
amely az átmeneti effektus időtartamát határozza meg
a transition-delay tulajdonság,
amely az átmeneti effektus késleltetését határozza meg
a transition-timing-function tulajdonság,
amely az átmeneti effektus időzítési függvényét határozza meg
a transition tulajdonság,
amely az átmeneti effektus rövidítése
a animation tulajdonság,
amellyel animáció készíthető