Egenskapen transition-duration

Egenskapen transition-duration ställer in tiden för utförandet av en mjuk övergång transition.

Syntax

cssselektor {
  transition-duration: tid i s eller ms;
}

Värden

Värde	Beskrivning
`s`	Anger tid i sekunder (till exempel `3s`). Det går att ange decimalvärden, till exempel, `0.5s` - en halv sekund.
`ms`	Anger tid i millisekunder (till exempel `3ms`). En sekund är `1000` millisekunder.

Standardvärde: 0s.

Exempel

För musen över blocket - det kommer mjukt att ändra sin bredd på 2 sekunder.

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

Результат:

Se även

egenskapen transition-property,
som anger egenskapsnamnet för en mjuk övergång
egenskapen transition-delay,
som anger fördröjningen före en mjuk övergång
egenskapen transition-timing-function,
som anger tidsfunktionen för en mjuk övergång
egenskapen transition,
som är en förkortning för mjuk övergång
egenskapen animation,
som kan användas för att skapa en animation