Proprietatea animation-direction

Proprietatea animation-direction stabilește direcția animației. În mod implicit, animația se repetă doar 1 dată și apoi revine la starea inițială, apoi, dacă este setată o întârziere animation-delay, va aștepta timpul stabilit și apoi ciclul va începe de la început.

Această proprietate permite modificarea acestui comportament, de exemplu, astfel încât animația după finalizare să rămână în locul în care s-a terminat, și să nu sară înapoi în poziția inițială.

De asemenea, poți seta un astfel de comportament: animația va ajunge la punctul extrem și se va întoarce înapoi (ca în transition). Consultați descrierea de mai jos.

Sintaxă

selector {
	animation-direction: normal | reverse | alternate | alternate-reverse;
}

Valori

Valoare	Descriere
`reverse`	Animația se va reda în sens invers.
`alternate`	Animația se va reda mai întâi în sens normal, apoi în sens invers (ca transition).
`alternate-reverse`	Animația se va reda din poziția finală în cea inițială și înapoi. În esență, acestea sunt valorile `alternate` și `reverse` într-un singur pachet.
`normal`	Animația se va reda de la început până la sfârșit, iar după finalizare va sări brusc înapoi în poziția inițială.

Valoarea implicită: normal.

Exemplu

Acum elementul se va mișca într-o direcție, apoi se va întoarce înapoi, deoarece este setată valoarea alternate. În acest caz, animation-duration are valoarea de 3 secunde și asta înseamnă că mișcările "dus" și "întors" vor dura câte 3 secunde:

<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;
}

Exemplu

Acum elementul se va mișca în direcția inversă (ar trebui de la stânga la dreapta, dar se va mișca de la dreapta la stânga):

<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;
}

Exemplu

Acum elementul se va mișca înainte și înapoi, dar în direcție inversă (ar trebui să înceapă de la stânga, dar va începe de la dreapta):

<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;
}

Vezi și

proprietatea animation-name,
care stabilește numele animației
proprietatea animation-duration,
care stabilește durata animației
proprietatea animation-delay,
care stabilește întârzierea înainte de executarea animației
proprietatea animation-timing-function,
care stabilește viteza de execuție a animației
proprietatea animation-iteration-count,
care stabilește numărul de iterații al animației
proprietatea animation-fill-mode,
care stabilește starea animației
proprietatea animation-play-state,
care permite punerea animației pe pauză
proprietatea animation,
reprezentând o prescurtare pentru animații
comanda @keyframes,
care stabilește cadrele cheie ale animației
tranzițiile line transition, reprezentând o animație la trecerea mouse-ului peste element