animation-direction հատկությունը

animation-direction հատկությունը սահմանում է անիմացիայի ուղղությունը: Լռելյայն անիմացիան կկրկնվի միայն 1 անգամ և ապա կվերադառնա սկզբնական վիճակին, ապա, եթե սահմանված է animation-delay հատկությունը, կսպասի նշված ժամանակը և ապա ցիկլը կսկսի նորից:

Այս հատկությունը թույլ է տալիս փոխել այս վարքագիծը, օրինակ, այնպես, որ անիմացիան ավարտից հետո մնա այնտեղ, որտեղ այն ավարտվեց, և չցատկի սկզբնական դիրք:

Կարելի է նաև սահմանել հետևյալ վարքագիծը. անիմացիան կհասնի ծայրահեղ կետին և կվերադառնա հետ (ինչպես transition-ում): Տես նկարագրությունը ստորև:

Շարահյուսություն

ընտրիչ {
	animation-direction: normal | reverse | alternate | alternate-reverse;
}

Արժեքներ

Արժեք	Նկարագրություն
`reverse`	Անիմացիան կկատարվի հակառակ ուղղությամբ:
`alternate`	Անիմացիան կկատարվի նախ ուղիղ, ապա հակառակ ուղղությամբ (ինչպես transition-ում):
`alternate-reverse`	Անիմացիան կկատարվի վերջնական դիրքից դեպի սկզբնական և հակառակը: Ըստ էության սա `alternate` և `reverse` արժեքների համադրությունն է:
`normal`	Անիմացիան կկատարվի սկզբից մինչև վերջ, իսկ ավարտից հետո ցատկով կվերադառնա սկզբնական դիրք:

Լռելյայն արժեքը՝ normal:

Օրինակ

Այժմ տարրը կշարժվի մի ուղղությամբ, ապա կվերադառնա հետ, քանի որ սահմանված է alternate արժեքը: Ընդ որում animation-duration հատկության արժեքը 3 վայրկյան է, ինչը նշանակում է, որ «այնտեղ» և «հետ» շարժումները կտևեն 3 վայրկյան:

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

Օրինակ

Այժմ տարրը կշարժվի հակառակ ուղղությամբ (պետք է ձախից աջ, բայց կլինի աջից ձախ):

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

Օրինակ

Այժմ տարրը կշարժվի այնտեղ-այստեղ, բայց հակառակ ուղղությամբ (պետք է սկսեր ձախից, բայց կսկսի աջից):

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

Տես նաև

animation-name հատկությունը,
որը սահմանում է անիմացիայի անունը
animation-duration հատկությունը,
որը սահմանում է անիմացիայի տևողությունը
animation-delay հատկությունը,
որը սահմանում է անիմացիայի կատարման ուշացումը
animation-timing-function հատկությունը,
որը սահմանում է անիմացիայի կատարման արագությունը
animation-iteration-count հատկությունը,
որը սահմանում է անիմացիայի կրկնությունների քանակը
animation-fill-mode հատկությունը,
որը սահմանում է անիմացիայի վիճակը
animation-play-state հատկությունը,
որը թույլ է տալիս դադարեցնել անիմացիան
animation հատկությունը,
որը անիմացիաների համառոտ գրելաձևն է
@keyframes հրամանը,
որը սահմանում է անիմացիայի հիմնական կադրերը
transition սահուն անցումները, որոնք տարրի վրա ցուցադրման անիմացիա են