CSS :: Свойство transition-property

css-свойство transition-property (от англ. transition property – свойство с эффектом перехода) указывает имя свойства, для которого будет использоваться переходный эффект при изменении его значения.

Характеристики

Значение по умолчанию: all.
Применяется: ко всем элементам, а также к псевдоэлементам ::before и ::after.
Наследуется: нет.
Анимируется: нет.
JavaScript: object.style.transitionProperty="value".

Синтаксис

transition-property: none || all || <имя свойства> [, <имя свойства>, ...]

Значения

Список имен css-свойств, для которых будет использоваться переходный эффект в случае изменения их значений. Имена должны перечисляться через запятую.
all – эффект перехода будет использован для всех анимируемых свойств.
none – эффект перехода не используется.

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/css-transitions-1/#propdef-transition-property

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/transition-property

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
		div{
		margin-top: 2em;
		overflow: hidden;
		white-space: nowrap;
		padding: 1em;
		width: 200px;
		height: 50px;
		border: solid 4px red;
		cursor: pointer;
		}
				
		/* Задаем общие параметры перехода */
		.tran{
		transition-delay: 0.1s;
		transition-timing-function: ease;
		transition-duration: 4s;
		}
		
		/* Задаем свойства для перехода */ 
		.tran_property_1{
		transition-property: width;
		}
		
		.tran_property_2{
		transition-property: width, background-color;
		}
				
		.tran_property_3{
		transition-property: all;
		}

		/* Будут изменяться три свойства */
		div.tran:hover{
		background-color: #0000ff;
		width: 400px;
		height: 100px;
		}
		
	</style>
	
</head>
<body>

	<div>Наведите курсор на блоки!</div>
	
	<div class="tran tran_property_1">
		transition-property: width<br>
		background-color - мгновенно<br>
		height - мгновенно
	</div>

	<div class="tran tran_property_2">
		transition-property: width, background-color<br>
		height - мгновенно
	</div>	

	<div class="tran tran_property_3">
		transition-property: all<br> 
		(можно не задавать)
	</div>
	
</body>	
</html>

Пример №1