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

CSS свойства

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

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

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

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