Egenskaben transition

Egenskaben transition er en sammentrækning for jævne overgange, den tillader dig at angive transition-duration, transition-property, transition-timing-function og transition-delay samtidigt.

Syntaks

selektor {
	transition: værdi;
}

Rækkefølgen af egenskaber har ikke betydning, dog skal varigheden (transition-duration) stå før forsinkelsen (transition-delay).

Værdier

Se de tilsvarende egenskaber. Standardværdi: all 0s ease 0s.

Værdien none annullerer alle overgange (de vil foregå øjeblikkeligt).

Eksempel

Hold musen over blokken - i 3 sekunder vil der ikke ske noget (der er en forsinkelse på 3s), og så vil den jævnt ændre sin bredde over 2 sekunder. Hvis du fjerner musen - vil der igen i 3 sekunder ikke ske noget, og så vil bredden jævnt formindskes til den oprindelige værdi:

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

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

Se også

egenskaben animation,
som kan bruges til at lave animation