Proprietatea transition-property

Proprietatea transition-property stabilește proprietatea care va fi animată cu o tranziție lină transition. Ca valoare trebuie specificat numele proprietății CSS care va fi animată. Dacă setați valoarea all (este setată implicit) - toate proprietățile vor fi animate simultan.

Sintaxă

selector {
	transition-property: valoare;
}

Exemplu

Treceți mouse-ul peste bloc - acesta își va schimba lină lățimea, deoarece transition-property are valoarea width:

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

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

Exemplu . Valoarea all

În acest exemplu transition-property are valoarea all - de aceea toate proprietățile specificate pentru starea hover (în cazul nostru width și height) se vor schimba lin. Toate modificările vor avea loc în același timp, care este stabilit în 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;
}

Vezi și

proprietatea transition-duration,
care stabilește durata tranziției line
proprietatea transition-delay,
care stabilește întârzierea înaintea tranziției line
proprietatea transition-timing-function,
care stabilește funcția de timing pentru tranziția lină
proprietatea transition,
care este o prescurtare pentru tranziția lină
proprietatea animation,
cu ajutorul căreia puteți crea o animație