Svojstvo transition-delay

Svojstvo transition-delay postavlja odlaganje pre pokretanja prelaza transition.

Sintaksa

selektor {
	transition-delay: vreme u s ili ms;
}

Vrednosti

Vrednost	Opis
`s`	Određuje vreme u sekundama (na primer `3s`). Moguće je zadati decimalne vrednosti, na primer, `0.5s` - pola sekunde.
`ms`	Određuje vreme u milisekundama (na primer `3ms`). Jedna sekunda je `1000` milisekundi.

Podrazumevana vrednost: 0s.

Primer

Pređite mišem preko bloka - 3 sekunde ništa se neće događati (postavljeno je odlaganje od 3s), a zatim će on postepeno promeniti svoju širinu za 2 sekunde. Ako zatim sklonite miš - opet će 3 sekunde ništa da se dešava, a zatim će se širina postepeno smanjiti na početnu vrednost:

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

Primer

Pređite mišem preko bloka - on će prvo promeniti svoju širinu za 2 sekunde, a zatim će promeniti svoju visinu za 4 sekunde. Svojstva će se menjati uzastopno, pošto je za visinu postavljeno odlaganje od 3 sekunde (vreme promene širine). Ako sklonite miš - promene će se desiti obrnutim redosledom: prvo će se smanjiti širina, a zatim će se smanjiti visina:

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

Pogledajte takođe

svojstvo transition-property,
koje određuje naziv svojstva za postepeni prelaz
svojstvo transition-duration,
koje određuje trajanje postepenog prelaza
svojstvo transition-timing-function,
koje određuje vremensku funkciju za postepeni prelaz
svojstvo transition,
koje je skraćenica za postepeni prelaz
svojstvo animation,
pomoću kojeg možete napraviti animaciju