Egenskapen transition-property

Egenskapen transition-property ställer in vilken egenskap som ska animeras med en mjuk övergång transition. Som värde ska man skicka namnet på den CSS-egenskap som ska animeras. Om man sätter värdet all (det är satt som standard) - kommer alla egenskaper att animeras samtidigt.

Syntax

cssselektor {
  transition-property: värde;
}

Exempel

För musen över blocket - det kommer smidigt att ändra sin bredd, eftersom transition-property har värdet 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;
}

Результат:

Exempel . Värdet all

I detta exempel har transition-property värdet all - därför kommer alla egenskaper som skrivits för tillståndet hover (i vårt fall är det width och height) att förändras mjukt. Alla förändringar kommer att ske under samma tid, som anges i 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;
}

Результат:

Se även