transition-delay xususiyati

transition-delay xususiyati transition silliq o‘tishini boshlashdan oldin kechiktrishni belgilaydi.

Sintaksis

selektor {
	transition-delay: s yoki ms da vaqt;
}

Qiymatlar

Qiymat	Tavsif
`s`	Vaqtni sekundlarda belgilaydi (masalan `3s`). Kasrli qiymatlarni ham belgilash mumkin, masalan, `0.5s` - yarim sekund.
`ms`	Vaqtni millisekundlarda belgilaydi (masalan `3ms`). Bir sekund `1000` millisekundga teng.

Standart qiymat: 0s.

Misol

Sichqonchani blok ustiga olib keling - 3 sekund davomida hech narsa bo‘lmaydi (3s kechiktrish belgilangan), keyin esa u o‘zining kengligini 2 sekund davomida silliq o‘zgartiradi. Agar keyin sichqonchani olib tashlasangiz - yana 3 sekund davomida hech narsa bo‘lmaydi, keyin esa kenglik boshlang‘ich qiymatiga silliq qisqaradi:

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

Misol

Sichqonchani blok ustiga olib keling - u avval o‘zining kengligini 2 sekund davomida o‘zgartiradi, keyin esa balandligini 4 sekund davomida o‘zgartiradi. Xususiyatlar ketma-ket o‘zgaradi, chunki balandlik uchun 3 sekundlik kechiktrish belgilangan (kenglikni o‘zgarish vaqti). Agar sichqonchani olib tashlasangiz - o‘zgarishlar teskari tartibda bo‘ladi: avval kenglik qisqaradi, keyin esa balandlik qisqaradi:

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

Shuningdek qarang

transition-property xususiyati,
bu silliq o‘tish uchun xususiyat nomini belgilaydi
transition-duration xususiyati,
bu silliq o‘tish davomiyligini belgilaydi
transition-timing-function xususiyati,
bu silliq o‘tish uchun vaqt funktsiyasini belgilaydi
transition xususiyati,
bu silliq o‘tish uchun qisqartma hisoblanadi
animation xususiyati,
bu orqali animatsiya yaratish mumkin