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

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

css-свойство animation-direction (от англ. animation directionнаправление анимации) задает направление движения анимации.

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

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

Синтаксис

animation-direction: normal | alternate | reverse | alternate-reverse

Значения

  • normal – после завершения цикла, анимация сбрасывается в исходное состояние и стартует заново (используется по умолчанию).
  • alternate – после завершения цикла, анимация начинает шаг за шагом воспроизводиться в обратном направлении.
  • reverse – анимация начинается сразу с конца цикла, выполняя все шаги в обратном направлении, а затем сбрасывается опять в конец цикла.
  • alternate-reverse – анимация начинается сразу с конца цикла, выполняя все шаги в обратном направлении, а затем начинает шаг за шагом воспроизводиться в прямом направлении, возвращаясь в конец цикла, который в данном случае является стартовой точкой.

Ссылки

Примеры

HTML Результат htmlCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
		div{
		margin-top: 5em;
		overflow: hidden;
		white-space: nowrap;
		padding: 1em;
		width: 460px;
		height: 50px;
		border: solid 4px red;
		}
				
		/* Задаем общие свойства анимации */ 
		.anim{
		animation-name: example_1;
		animation-duration: 5s;
		animation-timing-function: ease-in-out;
		animation-delay: 1.3s;
		animation-iteration-count: infinite;
		animation-fill-mode: backwards;
		}
		
		/* Задаем направление анимации */ 
		.anim_dir_1{
		animation-direction: normal;
		}
		
		.anim_dir_2{
		animation-direction: alternate;
		}
		
		/* Анимируем ширину элемента */				
		@keyframes example_1{
			from{
			width: 0px;
			}
			
			to{
			width: 500px;
			}
		}
	</style>
	
</head>
<body>

	<div class="anim anim_dir_1">animation-direction: normal</div>
	
	<div class="anim anim_dir_2">animation-direction: alternate</div>

</body>	
</html>		

Пример №1