CSS-eigenschap transition

De eigenschap transition is een korte notatie voor soepele overgangen, waarmee u tegelijkertijd transition-duration, transition-property, transition-timing-function en transition-delay kunt instellen.

Syntaxis

selector {
	transition: waarde;
}

De volgorde van de eigenschappen maakt niet uit, maar de uitvoeringstijd (transition-duration) moet vóór de vertraging (transition-delay) staan.

Waarden

Zie de betreffende eigenschappen. Standaardwaarde: all 0s ease 0s.

De waarde none annuleert alle overgangen (ze zullen onmiddellijk plaatsvinden).

Voorbeeld

Beweeg de muis over het blok - er zal 3 seconde niets gebeuren (er is een vertraging van 3s), en dan zal het soepel zijn breedte veranderen in 2 seconden. Als u de muis vervolgens weghaalt - dan zal er weer 3 seconde niets gebeuren, en dan zal de breedte soepel afnemen naar de oorspronkelijke waarde:

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

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

Zie ook

de eigenschap animation,
waarmee u een animatie kunt maken