Veturia animation-direction

Veturia animation-direction përcakton drejtimin e animacionit. Si parazgjedhje, animacioni do të përsëritet vetëm 1 herë dhe pastaj do të kthehet në gjendjen fillestare, më pas, nëse është vendosur një vonesë animation-delay, do të presë kohën e caktuar dhe pastaj cikli do të fillojë përsëri.

Kjo veturi lejon ndryshimin e këtij sjelljeje, për shembull, në mënyrë që animacioni pas përfundimit të mbetet aty ku ka mbaruar, dhe jo të kërcejë në pozicionin fillestar.

Gjithashtu mund të vendosni një sjellje të tillë: animacioni do të arrijë në pikën ekstreme dhe do të kthehet prapa (si në transition). Shihni përshkrimin më poshtë.

Sintaksa

përzgjedhësi {
	animation-direction: normal | reverse | alternate | alternate-reverse;
}

Vlerat

Vlera	Përshkrimi
`reverse`	Animacioni do të luhet në drejtim të kundërt.
`alternate`	Animacioni do të luhet fillimisht në drejtim të drejtë, e më pas në drejtim të kundërt (si transition).
`alternate-reverse`	Animacioni do të luhet nga pozicioni përfundimtar në atë fillestar dhe anasjelltas. Në thelb kjo është vlera `alternate` dhe `reverse` në një.
`normal`	Animacioni do të luhet nga fillimi në fund, dhe pas përfundimit do të kërcejë në mënyrë të befasishme në pozicionin fillestar.

Vlera e parazgjedhur: normal.

Shembull

Tani elementi do të lëvizë në një drejtim, e më pas do të kthehet prapa, pasi është vendosur vlera alternate. Në këtë rast animation-duration ka vlerën 3 sekonda dhe kjo do të thotë që lëvizjet "atje" dhe "prapa" do të zgjasin 3 sekonda secila:

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

Shembull

Tani elementi do të lëvizë në drejtim të kundërt (duhet të shkojë nga e majta në të djathtë, por do të shkojë nga e djathta në të majtë):

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

Shembull

Tani elementi do të lëvizë atje e këtej, por në drejtim të kundërt (duhet të fillojë nga e majta, por do të fillojë nga e djathta):

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

Shihni gjithashtu

veturia animation-name,
që përcakton emrin e animacionit
veturia animation-duration,
që përcakton kohëzgjatjen e animacionit
veturia animation-delay,
që përcakton vonesën para ekzekutimit të animacionit
veturia animation-timing-function,
që përcakton shpejtësinë e ekzekutimit të animacionit
veturia animation-iteration-count,
që përcakton numrin e përsëritjeve të animacionit
veturia animation-fill-mode,
që përcakton gjendjen e animacionit
veturia animation-play-state,
që lejon ndalimin e animacionit në pauzë
veturia animation,
që përfaqëson një shkurtim për animacionet
komanda @keyframes,
që përcakton kornizat kryesore të animacionit
kalimet e qeta transition, që përfaqësojnë një animacion me hover mbi elementin