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

selector {
	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:

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

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

Se även

egenskapen animation,
som kan användas för att skapa animation