animation-duration | Справочник CSS
http://belarusweb.net
Основы создания сайтов

animation-duration

Описание

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

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

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

Синтаксис

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

Значения

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

Ссылки

Примеры

HTML Результат BwCodes
<!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