Свойство animation-direction

Свойството animation-direction задава посоката на анимацията. По подразбиране анимацията ще се повтори само 1 път и след това ще се върне в началното състояние, след което, ако е зададено забавяне animation-delay, ще чака зададеното време и след това цикълът ще започне отначало.

Това свойство позволява да се промени това поведение, например така, че анимацията след приключване да остава в мястото, където е приключила, а да не прескача до начална позиция.

Също така може да се зададе такова поведение: анимацията ще стигне до крайната точка и ще се върне обратно (като при transition). Вижте описанието по-долу.

Синтаксис

селектор {
	animation-direction: normal | reverse | alternate | alternate-reverse;
}

Стойности

Стойност	Описание
`reverse`	Анимацията ще се възпроизвежда в обратна посока.
`alternate`	Анимацията ще се възпроизвежда първо в права, а след това в обратна посока (като transition).
`alternate-reverse`	Анимацията ще се възпроизвежда от крайно положение в начално и обратно. По същество това са стойностите `alternate` и `reverse` в една бутилка.
`normal`	Анимацията ще се възпроизвежда от началото до края, а след приключване рязко ще прескача до начално положение.

Стойност по подразбиране: normal.

Пример

Сега елементът ще се движи в едната посока, а след това ще се връща обратно, тъй като е зададена стойност alternate. При това animation-duration има стойност 3 секунди и това означава, че преместванията "натам" и "обратно" ще продължат по 3 секунди:

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	animation-direction: alternate;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Пример

Сега елементът ще се движи в обратна посока (трябва отляво надясно, а ще се движи отдясно наляво):

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}
			
#elem {
	animation-direction: reverse;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Пример

Сега елементът ще се движи натам-насам, но в обратна посока (трябва да започва отляво, а ще започва отдясно):

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	animation-direction: alternate-reverse;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Вижте също

свойство animation-name,
което задава име на анимацията
свойство animation-duration,
което задава продължителност на анимацията
свойство animation-delay,
което задава забавяне преди изпълнение на анимацията
свойство animation-timing-function,
което задава скорост на изпълнение на анимацията
свойство animation-iteration-count,
което задава брой итерации на анимацията
свойство animation-fill-mode,
което задава състояние на анимацията
свойство animation-play-state,
което позволява поставяне на анимацията на пауза
свойство animation,
представляващо съкращение за анимации
команда @keyframes,
задаваща ключови кадри на анимацията
плавни преходи transition, представляващи анимация при посочване на елемент