Ominaisuus transition-property

Ominaisuus transition-property asettaa ominaisuuden, joka animoidaan sulavalla siirtymällä transition. Arvoksi tulee antaa CSS-ominaisuuden nimi, joka animoidaan. Jos annetaan arvo all (se on oletusarvo) - kaikki ominaisuudet animoidaan yhtä aikaa.

Syntaksi

valitsija {
	transition-property: arvo;
}

Esimerkki

Vie hiiri laatikon päälle - se muuttaa leveyttään sulavasti, koska transition-property on saanut arvon width:

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

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

Esimerkki . Arvo all

Tässä esimerkissä transition-property on saanut arvon all - siksi sulavasti muuttuvat kaikki tilalle hover kirjoitetut ominaisuudet (meidän tapauksessamme ne ovat width ja height). Kaikki muutokset tapahtuvat samassa ajassa, joka on asetettu kohteessa 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;
}

Katso myös

ominaisuus transition-duration,
joka asettaa sulavan siirtymän keston
ominaisuus transition-delay,
joka asettaa viiveen ennen sulavaa siirtymää
ominaisuus transition-timing-function,
joka asettaa aikafunktion sulavalle siirtymälle
ominaisuus transition,
joka on lyhenne sulavalle siirtymälle
ominaisuus animation,
jolla voi tehdä animaation