Eigenschap transition-duration

De eigenschap transition-duration stelt de uitvoeringstijd in van een vloeiende overgang transition.

Syntaxis

cssselector {
  transition-duration: tijd in s of ms;
}

Waarden

Waarde	Beschrijving
`s`	Geeft de tijd op in seconden (bijvoorbeeld `3s`). Decimale waarden zijn mogelijk, bijvoorbeeld `0.5s` - een halve seconde.
`ms`	Geeft de tijd op in milliseconden (bijvoorbeeld `3ms`). Eén seconde is `1000` milliseconden.

Standaardwaarde: 0s.

Voorbeeld

Beweeg de muisaanwijzer over het blok - het zal zijn breedte geleidelijk veranderen in 2 seconden.

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

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

Результат:

Zie ook

de eigenschap transition-property,
die de naam van de eigenschap voor een vloeiende overgang instelt
de eigenschap transition-delay,
die de vertraging vóór een vloeiende overgang instelt
de eigenschap transition-timing-function,
die de tijdsfunctie voor een vloeiende overgang instelt
de eigenschap transition,
die de verkorte notatie is voor een vloeiende overgang
de eigenschap animation,
waarmee je een animatie kunt maken