Свойство transition-duration устанавливает время выполнения плавного перехода transition.

Данное свойство входит в свойство-сокращение transition.

См. также transition-property, transition-timing-function, transition-delay.

См. также CSS3 анимацию animation.

Синтаксис

селектор {
	transition-duration: время в s или ms;
}

Для анимирования нескольких CSS свойств следует задавать значения через запятую: 

селектор {
	transition-duration: 2s, 3s;
}

Значения

Значение Описание
s Задает время в секундах (например 3s). Можно задавать дробные значения, например, 0.5s - половина секунды.
ms Задает время в миллисекундах (например 3ms). Одна секунда - это 1000 миллисекунд.

Значение по умолчанию: 0s.

Примеры

Пример

Наведите мышкой на блок - он плавно изменит свою ширину за 2 секунды. 

#elem {
	border: 1px solid black;
	-webkit-transition-duration: 2s;
	-webkit-transition-property: width;
	-moz-transition-duration: 2s;
	-moz-transition-property: width;
	transition-duration: 2s;
	transition-property: width;
	height: 50px;
	width: 100px;
}
#elem:hover {
	width: 400px;
}

Результат выполнения кода:

Пример

Наведите мышкой на блок - он плавно изменит свою ширину и высоту. Причем ширину за 2 секунды, а высоту - за 6: 

#elem {
	border: 1px solid black;
	-webkit-transition-duration: 2s, 6s;
	-webkit-transition-property: width, height;
	-moz-transition-duration: 2s, 6s;
	-moz-transition-property: width, height;
	transition-duration: 2s, 6s;
	transition-property: width, height;
	height: 25px;
	width: 100px;
}
#elem:hover {
	height: 50px;
	width: 400px;
}

Результат выполнения кода: