Omadus transition-delay

Omadus transition-delay määrab viivituse enne sujuba ülemineku transition käivitamist.

Süntaks

valija {
	transition-delay: aeg s või ms;
}

Väärtused

Väärtus	Kirjeldus
`s`	Määrab aja sekundites (näiteks `3s`). Võib määrata murdarvulisi väärtusi, näiteks `0.5s` - pool sekundit.
`ms`	Määrab aja millisekundites (näiteks `3ms`). Üks sekund on `1000` millisekundit.

Vaikeväärtus: 0s.

Näide

Liigutage kursorit ploki kohale - 3 sekundit midagi ei juhtu (on seatud viivitus 3s), seejärel muudab see sujuvalt oma laiust 2 sekundiga. Kui seejärel kursor eemaldada - siis jälle 3 sekundit midagi ei juhtu, seejärel väheneb laius sujuvalt algväärtuseni:

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

Näide

Liigutage kursorit ploki kohale - see muudab esmalt oma laiust 2 sekundiga, seejärel muudab oma kõrgust 4 sekundiga. Omadused muutuvad järjestikku, kuna kõrgusele on seatud viivitus 3 sekundit (laiuse muutmise aeg). Kui kursor eemaldada - siis muutused toimuvad vastupidises järjekorras: esmalt väheneb laius, seejärel väheneb kõrgus:

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

Vaata ka

omadus transition-property,
mis määrab sujuva ülemineku omaduse nime
omadus transition-duration,
mis määrab sujuva ülemineku kestvuse
omadus transition-timing-function,
mis määrab sujuva ülemineku ajafunktsiooni
omadus transition,
mis on sujuva ülemineku lühend
omadus animation,
mille abil saab teha animatsiooni