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

cssselektor {
  transition-property: vrednost;
}

Primer

Pređite mišem preko bloka - on će glatko promeniti svoju širinu, jer transition-property ima vrednost 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;
}

Результат:

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:

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

Результат:

Pogledajte takođe