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

CSS свойства

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

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

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

СвойствоChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
transition-property26.0
4.0
-webkit-
16.0
4.0
-moz-
12.1
10.5
-o-
6.1
3.1
-webkit-
10.012.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 (свойство transition-property).
CSS свойства