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