Eigenschap transition-property

De eigenschap transition-property stelt de eigenschap in die geanimeerd wordt met een vloeiende overgang transition. Als waarde moet je de naam van de CSS-eigenschap doorgeven die geanimeerd moet worden. Als je de waarde all (het is standaard ingesteld) toekent - dan zullen alle eigenschappen tegelijk geanimeerd worden.

Syntaxis

cssselector {
  transition-property: waarde;
}

Voorbeeld

Beweeg de muis over het blok - het verandert soepel zijn breedte, omdat transition-property de waarde width heeft:

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 dit voorbeeld heeft transition-property de waarde all - daarom zullen soepel veranderen alle eigenschappen, geschreven voor de status hover (in ons geval is dit width en height). Alle veranderingen zullen plaatsvinden in dezelfde tijd, die is ingesteld 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;
}

Результат:

Zie ook

de eigenschap transition-duration,
die de duur van de vloeiende overgang instelt
de eigenschap transition-delay,
die een vertraging voor de vloeiende overgang instelt
de eigenschap transition-timing-function,
die de tijdsfunctie voor de vloeiende overgang instelt
de eigenschap transition,
die de verkorte notatie is voor de vloeiende overgang
de eigenschap animation,
waarmee je een animatie kunt maken