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

Определение и применение

CSS свойство transition-property указывает имя свойства CSS для которого используется переходный эффект.

Поддержка браузерами

Свойство	Chrome	Firefox	Opera	Safari	IExplorer	Edge
transition-property	26.0 4.0 -webkit-	16.0 4.0 -moz-	12.1 10.5 -o-	6.1 3.1 -webkit-	10.0	12.0

CSS синтаксис:

transition-property:"none | all | property | initial | inherit";

JavaScript синтаксис:

object.style.transitionProperty = "all"

Значения свойства

Значение	Описание
all	Все свойства получат эффект перехода. Это значение по умолчанию.
none	Нет свойств, к которым будет применен эффект перехода.
property	Определяет CSS свойство /-а, для которых будет применён эффект перехода. Если указано более одного свойства, то эти свойства разделяются запятой.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Указывает, что значение наследуется от родительского элемента.

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Переходные эффекты для конкретных свойств в CSS</title>
<style> 
div {
width : 150px; /* устанавливаем ширину блока */
height : 120px; /* устанавливаем высоту блока */
background-color : yellow; /* устанавливаем цвет заднего фона */
border : 5px dashed black; /* устанавливаем пунктирную границу размером 5px черного цвета */
}
div:hover {
width : 100%; /* устанавливаем ширину блока при наведении на элемент (псевдокласс :hover) */
height : 200px; /* устанавливаем высоту блока при наведении на элемент */
background-color : rgba(255,0,0,.7); /* устанавливаем цвет заднего фона при наведении */
}
.test   {
transition-duration : 5s;  /* устанавливаем длительность эффекта перехода равную 5 секундам */
transition-delay : 3s, 1s;  /* устанавливаем задержку перехода (1 значение = 1 значение свойства transition-property (width), 2 значение = 2 значение свойства transition-property (height)  */
transition-property : width, height;  /* устанавливаем свойства, которые получат переходный эффект (свойство background-color изменит цвет сразу в отличие от перечисленных в этом свойстве значений) */
}
</style>
</head>
	<body>
		<div class = "test">
			duration: 5s;<br>
			delay: 3s, 1s;<br>
			property: width, height;
		</div>
	</body>
</html>

Переходные эффекты для конкретных свойств в CSS (свойство transition-property).

CSS свойства