Eienskap transition-delay

Die eienskap transition-delay stel 'n vertraging voor die begin van die vloeiende oorgang transition.

Sintaksis

selektor {
	transition-delay: tyd in s of ms;
}

Waardes

Waarde	Beskrywing
`s`	Spesifiseer tyd in sekondes (byvoorbeeld `3s`). Kan desimale waardes spesifiseer, byvoorbeeld, `0.5s` - 'n halwe sekonde.
`ms`	Spesifiseer tyd in millisekondes (byvoorbeeld `3ms`). Een sekonde is `1000` millisekondes.

Verstekwaarde: 0s.

Voorbeeld

Beweeg die muis oor die blok - niks sal vir 3 sekondes gebeur nie (daar is 'n vertraging van 3s), en dan sal dit geleidelik sy breedte verander oor 2 sekondes. As jy dan die muis wegneem - sal weer niks vir 3 sekondes gebeur nie, en dan sal die breedte geleidelik verminder na die oorspronklike 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 die muis oor die blok - dit sal eers sy breedte verander oor 2 sekondes, en dan sy hoogte verander oor 4 sekondes. Die eienskappe sal opeenvolgend verander, aangesien daar 'n vertraging van 3 sekondes vir hoogte is (tyd van breedteverandering). As jy die muis wegneem - sal die veranderinge in die omgekeerde volgorde plaasvind: eers sal die breedte verminder, en dan sal die hoogte verminder:

<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;
}

Sien ook

die eienskap transition-property,
wat die naam van die eienskap vir die vloeiende oorgang spesifiseer
die eienskap transition-duration,
wat die tydsduur van die vloeiende oorgang spesifiseer
die eienskap transition-timing-function,
wat die tydsfunksie vir die vloeiende oorgang spesifiseer
die eienskap transition,
wat die afkorting vir die vloeiende oorgang is
die eienskap animation,
waarmee jy animasie kan maak