Savybė animation-direction

Savybė animation-direction nustato animacijos kryptį. Pagal nutylėjimą animacija kartojasi tik 1 kartą ir tada grįžta į pradinę būseną, tada, jei nustatytas delsos laikas animation-delay, lauks nustatytą laiką ir tada ciklas prasidės iš naujo.

Ši savybė leidžia pakeisti šį elgesį, pavyzdžiui, taip, kad animacija po pabaigos liktų toje vietoje, kur ji baigėsi, o ne šoktų atgal į pradinę padėtį.

Taip pat galima nustatyti tokį elgesį: animacija nuėjus iki kraštutinio taško grįš atgal (kaip ir transition). Žiūrėkite aprašymą žemiau.

Sintaksė

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

Reikšmės

Reikšmė	Aprašas
`reverse`	Animacija bus atkuriama atvirkštine kryptimi.
`alternate`	Animacija bus atkuriama pirmiausia tiesiogine, o paskiau atvirkštine kryptimi (kaip transition).
`alternate-reverse`	Animacija bus atkuriama iš galutinės padėties į pradinę ir atgal. Iš esmės tai yra reikšmės `alternate` ir `reverse` viename.
`normal`	Animacija bus atkuriama nuo pradžios iki pabaigos, o po pabaigos šuoliu peršoks į pradinę padėtį.

Numatytoji reikšmė: normal.

Pavyzdys

Dabar elementas judės viena kryptimi, o paskiau grįš atgal, nes nustatyta reikšmė alternate. Tuo tarpu animation-duration turi reikšmę 3 sekundės ir tai reiškia, kad judėjimas "ten" ir "atgal" truks po 3 sekundes:

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

Pavyzdys

Dabar elementas judės atvirkštine kryptimi (turėtų iš kairės į dešinę, o judės iš dešinės į kairę):

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

Pavyzdys

Dabar elementas judės pirmyn-atgal, bet atvirkštine kryptimi (turėtų pradėti kairėje, o pradės dešinėje):

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

Taip pat žiūrėkite

savybė animation-name,
kuri nustato animacijos pavadinimą
savybė animation-duration,
kuri nustato animacijos trukmę
savybė animation-delay,
kuri nustato delsą prieš animacijos vykdymą
savybė animation-timing-function,
kuri nustato animacijos vykdymo greitį
savybė animation-iteration-count,
kuri nustato animacijos kartojimų skaičių
savybė animation-fill-mode,
kuri nustato animacijos būseną
savybė animation-play-state,
kuri leidžia pristabdyti animaciją
savybė animation,
kuri yra trumpinys animacijoms
komanda @keyframes,
kuri nustato animacijos pagrindinius kadrus
sklandūs perėjimai transition, kurie yra animacija užvedus pelę ant elemento