Vlastnost animation-direction

Vlastnost animation-direction nastavuje směr animace. Ve výchozím nastavení se animace opakuje pouze 1 krát a poté se vrátí do výchozího stavu, poté, pokud je nastaveno zpoždění animation-delay, počká stanovený čas a poté se cyklus začne znovu.

Tato vlastnost umožňuje toto chování změnit, například tak, aby animace po skončení zůstala tam, kde skončila, a nepřeskočila zpět do výchozí polohy.

Lze také nastavit chování: animace dojde do krajního bodu a vrátí se zpět (jako u transition). Viz popis níže.

Syntaxe

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

Hodnoty

Hodnota	Popis
`reverse`	Animace bude přehrávána v opačném směru.
`alternate`	Animace bude přehrávána nejprve v přímém, a poté v opačném směru (jako transition).
`alternate-reverse`	Animace bude přehrávána z konečné polohy do počáteční a zpět. V podstatě jde o hodnoty `alternate` a `reverse` v jednom.
`normal`	Animace bude přehrávána od začátku do konce, a po skončení skokem přeskakuje do počáteční polohy.

Výchozí hodnota: normal.

Příklad

Nyní se bude prvek pohybovat jedním směrem, a poté se vracet zpět, protože je nastavena hodnota alternate. Přitom animation-duration má hodnotu 3 sekundy a to znamená, že přesuny "tam" a "zpět" budou trvat 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;
}

Příklad

Nyní se bude prvek pohybovat v opačném směru (měl by zleva doprava, ale bude zprava doleva):

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

Příklad

Nyní se bude prvek pohybovat tam a zpět, ale v opačném směru (měl by začínat vlevo, ale bude začínat 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;
}

Viz také

vlastnost animation-name,
která nastavuje jméno animace
vlastnost animation-duration,
která nastavuje dobu trvání animace
vlastnost animation-delay,
která nastavuje zpoždění před provedením animace
vlastnost animation-timing-function,
která nastavuje rychlost provedení animace
vlastnost animation-iteration-count,
která nastavuje počet opakování animace
vlastnost animation-fill-mode,
která nastavuje stav animace
vlastnost animation-play-state,
která umožňuje pozastavit animaci
vlastnost animation,
představující zkratku pro animace
příkaz @keyframes,
nastavující klíčové snímky animace
plynulé přechody transition, představující animaci při najetí na prvek