Egenskapen transition

Egenskapen transition är en förkortning för mjuka övergångar, den låter dig samtidigt ange transition-duration, transition-property, transition-timing-function och transition-delay.

Syntax

cssselector {
  transition: värde;
}

Ordningen på egenskaperna spelar ingen roll, men utförandetiden (transition-duration) måste stå före fördröjningen (transition-delay).

Värden

Se motsvarande egenskaper. Standardvärde: all 0s ease 0s.

Värdet none avbryter alla övergångar (de kommer att ske omedelbart).

Exempel

För musen över blocket - 3 sekunder kommer inget att hända (det finns en fördröjning på 3s), och sedan kommer det smidigt att ändra sin bredd på 2 sekunder. Om du sedan tar bort musen - så kommer igen 3 sekunder inget att hända, och sedan kommer bredden smidigt att minska till ursprungsvärdet:

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

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

Результат:

Se även