Lastnost animation-direction

Lastnost animation-direction določa smer animacije. Privzeto se bo animacija ponovila le 1 krat in nato vrnila v začetno stanje, nato, če je nastavljena zamuda animation-delay, bo čakala določen čas in nato se bo cikel začel znova.

Ta lastnost omogoča spreminjanje tega vedenja, na primer tako, da animacija po koncu ostane tam, kjer se je končala, namesto da bi skočila nazaj v začetni položaj.

Prav tako lahko nastavite takšno vedenje: animacija bo dosegla skrajno točko in se vrnila nazaj (kot pri transition). Glejte opis spodaj.

Sintaksa

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

Vrednosti

Vrednost	Opis
`reverse`	Animacija se bo predvajala v obratni smeri.
`alternate`	Animacija se bo predvajala najprej v direktni, nato pa v obratni smeri (kot transition).
`alternate-reverse`	Animacija se bo predvajala iz končnega položaja v začetnega in nazaj. V bistvu so to vrednosti `alternate` in `reverse` v enem.
`normal`	Animacija se bo predvajala od začetka do konca, po koncu pa bo s skokom prešla v začetni položaj.

Privzeta vrednost: normal.

Primer

Zdaj se bo element premikal v eno smer, nato pa nazaj, saj je nastavljena vrednost alternate. Pri tem ima animation-duration vrednost 3 sekunde, kar pomeni, da bosta premikanje "tja" in "nazaj" trajali 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

Zdaj se bo element premikal v obratno smer (namesto od leve proti desni, bo od desne proti levi):

<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

Zdaj se bo element premikal tja in nazaj, vendar v obratni smeri (namesto da bi začel levo, bo začel desno):

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

Glejte tudi

lastnost animation-name,
ki določa ime animacije
lastnost animation-duration,
ki določa trajanje animacije
lastnost animation-delay,
ki določa zamudo pred izvedbo animacije
lastnost animation-timing-function,
ki določa hitrost izvajanja animacije
lastnost animation-iteration-count,
ki določa število ponovitev animacije
lastnost animation-fill-mode,
ki določa stanje animacije
lastnost animation-play-state,
ki omogoča premor animacije
lastnost animation,
ki je okrajšava za animacije
ukaz @keyframes,
ki določa ključne sličice animacije
gladki prehodi transition, ki predstavljajo animacijo ob preletu miške nad elementom