Xususiyyat transition-delay

Xususiyyat transition-delay transition hamar transformasiyasinin baslamasindan evvel gecikme teyin edir.

Sintaksis

selektor {
	transition-delay: s ve ya ms ile vaxt;
}

Deyerler

Deyer	Izah
`s`	Vaxti saniyelerle teyin edir (meselen `3s`). Kesir deyerler teyin etmek olar, meselen, `0.5s` - yarim saniye.
`ms`	Vaxti millisaniyelerle teyin edir (meselen `3ms`). Bir saniye `1000` millisaniyedir.

Standart deyer: 0s.

Numune

Blokun uzerine sichqoncu gətirin - 3 saniye heç ne baş vermeyecek (3s gecikme var), sonra isə o enini 2 saniyede hamar deyişecek. Əgər sonra sichqonu kenara cəksəniz - yenə 3 saniye heç ne baş vermeyecek, sonra isə en hamar şəkildə azalaraq ilkin deyerine qayidacaq:

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

Numune

Blokun uzerine sichqoncu gətirin - o evvelce enini 2 saniyede deyişecek, sonra isə hundurluyunu 4 saniyede deyişecek. Xususiyyetler ardicil olaraq deyişecek, çunki hundurluk ucun 3 saniye gecikme var (enin deyişme vaxti). Əgər sichqonu kenara cəksəniz - deyişiklikler ters ardicilliqla baş verəcək: evvel eni azalacaq, sonra isə hundurluyu azalacaq:

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

Həmçinin bax

xususiyyat transition-property,
hamar transformasiya ucun xususiyyetin adini teyin edir
xususiyyat transition-duration,
hamar transformasiyanin muddetini teyin edir
xususiyyat transition-timing-function,
hamar transformasiya ucun vaxt funksiyasini teyin edir
xususiyyat transition,
hamar transformasiya ucun qisaltmadir
xususiyyat animation,
köməyi ilə animasiya yaratmaq olar