Својство transition-property

Својство transition-property поставља својство које ће се анимирати глатким прелазом transition. Као вредност треба пренети назив CSS својства које ће се анимирати. Ако задате вредност all (подразумевано је) - анимираће се сва својства одједном.

Синтакса

селектор {
	transition-property: вредност;
}

Пример

Превуците мишем преко блока - он ће глатко променити своју ширину, јер transition-property има вредност width:

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

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

Пример . Вредност all

У овом примеру transition-property има вредност all - стога ће се глатко мењати сва својства, записана за стање hover (у нашем случају то су width и height). Све промене ће трајати исто време, које је задато у transition-duration:

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

#elem {
	border: 1px solid black;
	transition-duration: 2s;
	transition-property: all;
	height: 25px;
	width: 100px;
}
#elem:hover {
	height: 50px;
	width: 400px;
}

Погледајте такође

својство transition-duration,
које задаје трајање глатког прелаза
својство transition-delay,
које задаје одлагање пре глатког прелаза
својство transition-timing-function,
које задаје временску функцију за глатки прелаз
својство transition,
које представља скраћеницу за глатки прелаз
својство animation,
помоћу којег се може направити анимација