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

css-свойство transition (от англ. transition – переход) позволяет задать сразу несколько параметров транзитного перехода, которые могут быть перечислены через пробел в следующей последовательности: transition-property || transition-duration || transition-timing-function || transition-delay.

Свойство transition позволяет применять один эффект перехода только к одному свойству. Указывать через запятую несколько имен свойств для перехода нельзя: необходимо указывать весь блок параметров для каждого отдельного свойства, перечисляя такие блоки через запятую (см. синтаксис).

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

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

Синтаксис

transition: none || [[transition-property || transition-duration || transition-timing-function || transition-delay], ...]

Значения

Перечисляемые через запятую блоки параметров перехода для каждого требуемого свойства, в которых значения свойств перечисляются через запятую в следующей последовательности: transition-property || transition-duration || transition-timing-function || transition-delay. Если значение какого-нибудь свойства не будет указано, браузер применит значение по умолчанию.
none – отмена эффекта перехода.

Ссылки

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

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

Примеры

HTML Результат

htmlCodes

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

	<style>
		/* Параметры блока */
		div{
		padding: 1em;
		width: 130px;
		height: 50px;
		border: solid 4px red;
		background-color: #00ff00;
		cursor: pointer;
		}

		/* Задаем по отдельности
		.transition_ex{
		transition-property: width, background-color;
		transition-duration: 1s;
		transition-timing-function: ease;
		transition-delay: 0.2s;
		} */
		
		/* Задаем в одном свойстве */
		.transition_ex{
		transition: width 1s ease 0.2s, background-color 1s ease 0.2s;
		}		
		
		div:hover{
		background-color: #0000ff;
		width: 450px;
		}
	</style>
	
</head>
<body>
	<div class="transition_ex">Наведите курсор!</div>
</body>
</html>

Пример №1