Svojstvo transition-property

Svojstvo transition-property postavlja svojstvo koje će biti animirano glatkim prelazom transition. Kao vrednost treba proslediti ime CSS svojstva koje će se animirati. Ako se postavi vrednost all (ona je podrazumevana) - biće animirana sva svojstva istovremeno.

Sintaksa

selektor {
	transition-property: vrednost;
}

Primer

Pređite mišem preko bloka - on će glatko promeniti svoju širinu, jer transition-property ima vrednost width:

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

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

Primer . Vrednost all

U ovom primeru transition-property ima vrednost all - zato će se glatko menjati sva svojstva, napisana za stanje hover (u našem slučaju to su width i height). Sve promene će se odvijati za isto vreme, koje je zadato u 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;
}

Pogledajte takođe

svojstvo transition-duration,
koje zadaje trajanje glatkog prelaza
svojstvo transition-delay,
koje zadaje kašnjenje pre glatkog prelaza
svojstvo transition-timing-function,
koje zadaje vremensku funkciju za glatki prelaz
svojstvo transition,
koje je skraćenica za glatki prelaz
svojstvo animation,
pomoću koga se može napraviti animacija