html.okpython.net
HTML и CSS для начинающих

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

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

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

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

Синтаксис

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

Значения

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

Ссылки

Примеры

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