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

css-свойство transition-duration (от англ. transition duration – длительность перехода) устанавливает продолжительность перехода от одного значения свойства к другому.

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

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

Синтаксис

transition-duration: <время> [, <время>, ...]

Значения

В качестве значения свойство animation-duration принимает время, указанное в секундах (s) или миллисекундах (ms). По умолчанию используется время равное нулю, что означает отсутствие перехода вообще. Отрицательные значения не разрешаются. Однако разрешается перечислять через запятую несколько значений промежутков времени для каждого из свойств, перечисленных в качестве значения в transition-property.

Ссылки

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

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

Примеры

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-property: width, background-color;
		transition-delay: 0.1s;
		transition-timing-function: ease;
		}
		
		/* Задаем длительность перехода */ 
		.tran_duration_1{
		transition-duration: 0.5s;
		}
		
		.tran_duration_2{
		transition-duration: 1.5s;
		}
				
		.tran_duration_3{
		transition-duration: 3500ms;
		}

		div.tran:hover{
		background-color: #0000ff;
		width: 400px;
		}
		
	</style>
	
</head>
<body>

	<div>Наведите курсор на блоки!</div>
	
	<div class="tran tran_duration_1">transition-duration: 0.5s</div>
	
	<div class="tran tran_duration_2">transition-duration: 1.5s</div>

	<div class="tran tran_duration_3">transition-duration: 3500ms</div>	
	
</body>	
</html>

Пример №1