Хосияти 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;
}

Результат:

Ҳамчунин бубинед