Vlastnosť animation-direction

Vlastnosť animation-direction nastavuje smer animácie. Štandardne sa animácia zopakuje iba 1 krát a potom sa vráti do pôvodného stavu, následne, ak je nastavené oneskorenie animation-delay, bude čakať stanovený čas a potom cyklus začne odznova.

Táto vlastnosť umožňuje zmeniť toto správanie, napríklad tak, aby animácia po skončení zostala v mieste, kde skončila, a nepreskočila späť do počiatočnej pozície.

Tiež je možné nastaviť také správanie: animácia dôjde do krajného bodu a vráti sa späť (ako pri transition). Pozrite si popis nižšie.

Syntax

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

Hodnoty

Hodnota	Popis
`reverse`	Animácia bude prehrávaná v opačnom smere.
`alternate`	Animácia bude prehrávaná najprv v priamom, a potom v opačnom smere (ako transition).
`alternate-reverse`	Animácia bude prehrávaná z konečnej pozície do počiatočnej a späť. V podstate sú to hodnoty `alternate` a `reverse` v jednom.
`normal`	Animácia bude prehrávaná od začiatku do konca, a po skončení skokom preskočí späť do počiatočnej pozície.

Štandardná hodnota: normal.

Príklad

Teraz sa bude prvok pohybovať jedným smerom, a potom sa vráti späť, pretože je zadaná hodnota alternate. Pritom animation-duration má hodnotu 3 sekundy a to znamená, že presuny "tam" a "späť" budú trvať 3 sekundy:

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

Príklad

Teraz sa bude prvok pohybovať opačným smerom (mal by zľava doprava, ale bude sprava doľava):

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

Príklad

Teraz sa bude prvok pohybovať tam a späť, ale v opačnom smere (mal by začínať vľavo, ale bude začínať vpravo):

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

Pozrite tiež

vlastnosť animation-name,
ktorá nastavuje názov animácie
vlastnosť animation-duration,
ktorá nastavuje trvanie animácie
vlastnosť animation-delay,
ktorá nastavuje oneskorenie pred vykonaním animácie
vlastnosť animation-timing-function,
ktorá nastavuje rýchlosť vykonávania animácie
vlastnosť animation-iteration-count,
ktorá nastavuje počet opakovaní animácie
vlastnosť animation-fill-mode,
ktorá nastavuje stav animácie
vlastnosť animation-play-state,
ktorá umožňuje pozastaviť animáciu
vlastnosť animation,
ktorá predstavuje skrátený zápis pre animácie
príkaz @keyframes,
ktorý nastavuje kľúčové fázy animácie
plynulé prechody transition, ktoré predstavujú animáciu pri prejdení myšou nad prvok