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

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

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

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

Свойство	Chrome	Firefox	Opera	Safari	IExplorer	Edge
transition-duration	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-duration:"time(s/ms) | initial | inherit";

JavaScript синтаксис:

object.style.transitionDuration = "5s"

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

Значение	Описание
time	Определяет, сколько секунд(s) или миллисекунд(ms) эффект перехода занимает времени. Значение по умолчанию составляет 0 сек (отсутствие эффекта перехода).
initial	Устанавливает свойство в значение по умолчанию.
inherit	Указывает, что значение наследуется от родительского элемента.

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Нет.

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

<!DOCTYPE html>
<html>
<head>
<title>Эффект перехода в CSS</title>
<style> 
div {
width : 70px; /* устанавливаем ширину блока */
height : 70px; /* устанавливаем высоту блока */
background-color : yellow; /* устанавливает цвет заднего фона */
border : 5px dashed black; /* устанавливает пунктирную границу размером 5px черного цвета */
display : inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
margin-right : 15px; /* устанавливаем величину отступа от правого края элемента */
}
div:hover {
height : 200px; /* устанавливаем высоту блока при наведении на элемент (псевдокласс :hover) */
}
.test   {transition-duration : 5s;}  /* устанавливаем длительность перехода равную 5 секундам */
.test2 {transition-duration : 2s;}  /* устанавливаем длительность перехода равную 2 секундам */
.test3 {transition-duration : 400ms;}  /* устанавливаем длительность перехода равную 400 миллисекундам (0,4 секунды) */
</style>
</head>
	<body>
		<div class = "test">5s</div>
		<div class = "test2">2s</div>
		<div class = "test3">400ms</div>
	</body>
</html>

Эффект перехода в CSS (свойство transition-duration).

CSS свойства