Svojstvo animation-direction

Svojstvo animation-direction zadaje smer animacije. Podrazumevano, animacija će se ponoviti samo 1 put i zatim će se vratiti u početno stanje, nakon čega, ako je zadato kašnjenje animation-delay, će čekati zadato vreme i onda će ciklus početi iznova.

Ovo svojstvo omogućava promenu ovog ponašanja, na primer, tako da animacija nakon završetka ostane na mestu gde se završila, a da ne skoči natrag u početni položaj.

Takođe možete zadati sledeće ponašanje: animacija će stići do krajnje tačke i vratiti se nazad (kao kod transition). Pogledajte opis ispod.

Sintaksa

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

Vrednosti

Vrednost	Opis
`reverse`	Animacija će se reprodukovati u obrnutom smeru.
`alternate`	Animacija će se reprodukovati prvo u pravom, a zatim u obrnutom smeru (kao transition).
`alternate-reverse`	Animacija će se reprodukovati iz krajnjeg položaja u početni i obrnuto. U suštini, ovo su vrednosti `alternate` i `reverse` u jednom.
`normal`	Animacija će se reprodukovati od početka ka kraju, a nakon završetka skokom će preskočiti u početni položaj.

Podrazumevana vrednost: normal.

Primer

Sada će se element kretati u jednom smeru, a zatim će se vraćati nazad, pošto je zadato vrednost alternate. Pritom, animation-duration ima vrednost 3 sekunde i to znači da će pomeranja "tamo" i "nazad" trajati po 3 sekunde:

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

Primer

Sada će se element kretati u obrnutom smeru (trebalo bi sleva nadesno, a sada će sdesna nalevo):

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

Primer

Sada će se element kretati tamo-ovamo, ali u obrnutom smeru (trebalo bi da počne sleva, a sada će početi sdesna):

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

Pogledajte takođe

svojstvo animation-name,
koje zadaje ime animacije
svojstvo animation-duration,
koje zadaje trajanje animacije
svojstvo animation-delay,
koje zadaje kašnjenje pre izvršavanja animacije
svojstvo animation-timing-function,
koje zadaje brzinu izvršavanja animacije
svojstvo animation-iteration-count,
koje zadaje broj iteracija animacije
svojstvo animation-fill-mode,
koje zadaje stanje animacije
svojstvo animation-play-state,
koje omogućava pauziranje animacije
svojstvo animation,
koje predstavlja skraćeni zapis za animacije
komandu @keyframes,
koja zadaje ključne kadrove animacije
glatke prelaze transition, koji predstavljaju animaciju pri prelasku miša preko elementa