Својство 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,
којим можете направити анимацију