Својство 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, кои претставуваат анимација при преминување на елементот