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ă

cssselector {
  transition-property: valoare;
}

Exemplu

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

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

css#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:

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

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

Результат:

Vezi și