Свойство transition

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

Синтаксис

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

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

Қийматлар

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

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

Мисол

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

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

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

Результат:

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