Transition xususiyati

transition xususiyati - silliq o‘tishlar uchun qisqartma, bir vaqtning o‘zida transition-duration, transition-property, transition-timing-function va transition-delay xususiyatlarini belgilash imkonini beradi.

Sintaksis

selektor {
	transition: qiymat;
}

Xususiyatlarning tartibi muhim emas, ammo bajarilish vaqti (transition-duration) kechikish (transition-delay) dan oldin turishi kerak.

Qiymatlar

Mos xususiyatlarga qarang. Standart qiymat: all 0s ease 0s.

none qiymati barcha o‘tishlarni bekor qiladi (ular bir zumda amalga oshiriladi).

Misol

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

<div id="elem"></div>

#elem {
	border: 1px solid black;
	transition: width 2s ease 3s;
	width: 100px;
	height: 50px;
}
#elem:hover {
	width: 400px;
}

Shuningdek qarang

animation xususiyati,
uning yordamida animatsiya yaratish mumkin