Свойство transition

Свойство transition - планли ўтишлар учун қисқартирилган хусусият бўлиб, бир вақтнинг ўзида transition-duration, transition-property, transition-timing-function ва transition-delay хусусиятларини белгилаш имконини беради.

Синтаксис

селектор {
	transition: қиймат;
}

Хусусиятларнинг тартиби аҳамиятга эта эмас, лекин бажариш вақти (transition-duration) кечиктириш (transition-delay)дан олдин келиши керак.

Қийматлар

Мос хусусиятларга қаранг. Андоза қиймат: all 0s ease 0s.

none қиймати барча ўтишларни бекор қилади (улар дароқ юз беради).

Мисол

Блок устига чангқонни олиб боринг - 3 сония ҳеч нарса юз бермайди (3s кечиктириш бор), сўнгра у 2 сонияда ўз энини планли ўзгартиради. Агар сўнгра чангқонни олиб ташлангиз - яна 3 сония ҳеч нарса юз бермайди, сўнгра эни бошланғич қийматига планли кичайиди:

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

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

Қуйидагиларни ҳам кўринг

свойство animation,
ёрдамида анимация яратиш мумкин