Eigenschap transition-delay

De eigenschap transition-delay stelt een vertraging in voor het starten van de vloeiende overgang transition.

Syntaxis

selector {
	transition-delay: tijd in s of ms;
}

Waarden

Waarde	Beschrijving
`s`	Geeft de tijd in seconden aan (bijvoorbeeld `3s`). Decimale waarden zijn mogelijk, bijvoorbeeld `0.5s` - een halve seconde.
`ms`	Geeft de tijd in milliseconden aan (bijvoorbeeld `3ms`). Eén seconde is `1000` milliseconden.

Standaardwaarde: 0s.

Voorbeeld

Beweeg de muis over het blok - er zal 3 seconde niets gebeuren (er is een vertraging van 3s ingesteld), en daarna zal het soepel zijn breedte wijzigen gedurende 2 seconden. Als je de muis vervolgens wegneemt - zal er weer 3 seconde niets gebeuren, en daarna zal de breedte soepel afnemen naar de oorspronkelijke waarde:

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

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

Voorbeeld

Beweeg de muis over het blok - het zal eerst zijn breedte wijzigen gedurende 2 seconden, en daarna zijn hoogte wijzigen gedurende 4 seconden. De eigenschappen zullen opeenvolgend wijzigen, omdat voor de hoogte een vertraging van 3 seconde is ingesteld (de wijzigingstijd van de breedte). Als je de muis wegneemt - zullen de wijzigingen in omgekeerde volgorde plaatsvinden: eerst neemt de breedte af, en daarna neemt de hoogte af:

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

#elem {
	border: 1px solid black;
	transition-duration: 2s, 4s;
	transition-property: width, height;
	transition-delay: 0s, 3s;
	width: 100px;
	height: 25px;
}
#elem:hover {
	width: 400px;
	height: 50px;
}

Zie ook

de eigenschap transition-property,
die de naam van de eigenschap voor de vloeiende overgang specificeert
de eigenschap transition-duration,
die de duur van de vloeiende overgang specificeert
de eigenschap transition-timing-function,
die de tijdsfunctie voor de vloeiende overgang specificeert
de eigenschap transition,
die de verkorte notatie is voor de vloeiende overgang
de eigenschap animation,
waarmee je een animatie kunt maken