Хосияти 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,
ки бо ёрии он метавон аниматсия сохт