Eienskap transition-property

Die eienskap transition-property stel die eienskap in wat geanimeer sal word met 'n sagte oorgang transition. As waarde moet die naam van die CSS-eienskap oorgedra word wat geanimeer sal word. As die waarde all gestel word (dit is standaard) - sal alle eienskappe gelyktydig geanimeer word.

Sintaksis

cssselektor {
  transition-property: waarde;
}

Voorbeeld

Beweeg die muis oor die blok - dit sal gladjes sy wydte verander, aangesien transition-property die waarde width het:

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

Результат:

Voorbeeld . Waarde all

In hierdie voorbeeld het transition-property die waarde all - daarom sal alle eienskappe wat vir die toestand hover geskryf is, gladjes verander (in ons geval is dit width en height). Alle veranderinge sal plaasvind oor een tydperk, wat gestel is in 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;
}

Результат:

Sien ook