Свойство transition-property устанавливает свойство, которое будет анимироваться плавным переходом transition. Если задать значение all (оно задано по умолчанию) - будут анимированы все свойства сразу.

Данное свойство входит в свойство-сокращение transition.

См. также transition-duration, transition-timing-function, transition-delay.

См. также CSS3 анимацию animation.

Синтаксис

селектор {
	transition-property: CSS свойство;
}

Для анимирования нескольких CSS свойств следует задавать значения через запятую:

селектор {
	transition-property: width, height;
}

Значения

Значение Описание
CSS свойство Плавный переход будет применен к заданному CSS свойству.
all Плавный переход будет применен ко всем CSS свойствам.

Значение по умолчанию: all.

Примеры

Пример

Наведите мышкой на блок - он плавно изменит свою ширину, так как transition-property имеет значение width:

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

Результат выполнения кода:

Пример

Наведите мышкой на блок - он плавно изменит свою ширину и высоту, так как transition-property имеет значение width, height. Ширина будет меняться за 2 секунды, а высота - за 4, так как transition-duration имеет значение '2s, 4s':

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

Результат выполнения кода:

Пример . Значение all

В данном примере transition-property имеет значение all - поэтому плавно изменятся будут все свойства, написанные для состояния hover (в нашем случае это width и height). Все изменения будут проходить за одно время, которое задано в transition-duration:

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

Результат выполнения кода: