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

css-свойство animation-duration (от англ. animation duration – длительность анимации) устанавливает продолжительность одного цикла анимации.

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

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

Синтаксис

animation-duration: <время>[, <время>]*

Значения

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

Ссылки

Официальный сайт W3C: https://www.w3.org/TR/css-animations-1/#animation-duration

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/animation-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: 460px;
		height: 50px;
		border: solid 4px red;
		}
				
		/* Задаем общие свойства анимации */ 
		.anim{
		animation-name: example_1;
		animation-timing-function: ease-in-out;
		animation-delay: 1.3s;
		animation-iteration-count: infinite;
		animation-direction: alternate;
		animation-fill-mode: backwards;
		}
		
		/* Задаем длительность анимации */ 
		.anim_duration_1{
		animation-duration: 1s;
		}
		
		.anim_duration_2{
		animation-duration: 2.5s;
		}
				
		.anim_duration_3{
		animation-duration: 5500ms;
		}		

		/* Анимируем ширину элемента */				
		@keyframes example_1{
			from{
			width: 0px;
			}
			
			to{
			width: 500px;
			}
		}
	</style>
	
</head>
<body>

	<div class="anim anim_duration_1">animation-duration: 1s</div>
	
	<div class="anim anim_duration_2">animation-duration: 2.5s</div>

	<div class="anim anim_duration_3">animation-duration: 5500ms</div>	
	
</body>	
</html>

Пример №1