Īpašība animation-direction

Īpašība animation-direction nosaka animācijas virzienu. Pēc noklusējuma animācija tiks atkārtota tikai 1 reizi un pēc tam atgriezīsies sākotnējā stāvoklī, tad, ja ir iestatīta aizkave animation-delay, tiks gaidīts noteiktais laiks un pēc tam cikls sāksies no jauna.

Šī īpašība ļauj mainīt šo uzvedību, piemēram, tā, lai animācija pēc beigām paliktu tajā vietā, kur tā beidzās, nevis pārlēktu atpakaļ sākotnējā stāvoklī.

Var arī iestatīt šādu uzvedību: animācija nonāks līdz galējam punktam un atgriezīsies atpakaļ (kā transition). Skatīt aprakstu zemāk.

Sintakse

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

Vērtības

Vērtība	Apraksts
`reverse`	Animācija tiks atskaņota apgrieztā virzienā.
`alternate`	Animācija tiks atskaņota vispirms tiešajā, un pēc tam apgrieztajā virzienā (kā transition).
`alternate-reverse`	Animācija tiks atskaņota no gala stāvokļa uz sākuma stāvokli un atpakaļ. Būtībā šīs ir vērtības `alternate` un `reverse` vienā.
`normal`	Animācija tiks atskaņota no sākuma līdz beigām, un pēc beigām lēcienā pārlēks atpakaļ sākotnējā stāvoklī.

Noklusējuma vērtība: normal.

Piemērs

Tagad elements kustēsies vienā virzienā, un pēc tam atgriezīsies atpakaļ, jo ir iestatīta vērtība alternate. Turklāt animation-duration ir vērtība 3 sekundes, un tas nozīmē, ka pārvietošanās "turp" un "atpakaļ" ilgs pa 3 sekundēm:

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

Piemērs

Tagad elements kustēsies apgrieztā virzienā (vajadzētu no kreisās uz labo, bet kustēsies no labās uz kreiso):

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

Piemērs

Tagad elements kustēsies turp-atpakaļ, bet apgrieztā virzienā (vajadzētu sākt no kreisās puses, bet sāks no labās puses):

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

Skatiet arī

īpašība animation-name,
kas nosaka animācijas nosaukumu
īpašība animation-duration,
kas nosaka animācijas ilgumu
īpašība animation-delay,
kas nosaka aizkavi pirms animācijas izpildes
īpašība animation-timing-function,
kas nosaka animācijas izpildes ātrumu
īpašība animation-iteration-count,
kas nosaka animācijas atkārtojumu skaitu
īpašība animation-fill-mode,
kas nosaka animācijas stāvokli
īpašība animation-play-state,
kas ļauj apturēt animāciju
īpašība animation,
kas ir saīsinājums animācijām
komanda @keyframes,
kas nosaka animācijas galvenos kadrus
gludie pārejas transition, kas ir animācija, kad novietojat kursoru virs elementa