Animation-direction қасиеті

animation-direction қасиеті анимацияның бағытын белгілейді. Әдепкі бойынша анимация тек 1 рет қайталанып, содан кейін бастапқы күйге оралады, содан кейін, егер animation-delay кешіктіру белгіленсе, белгіленген уақытты күтеді және содан кейін цикл басталады.

Бұл қасиет мінез-құлқты өзгертуге мүмкіндік береді, мысалы, анимация аяқталғаннан кейін ол аяқталған жерде қалады, бастапқы жағдайға секірмей.

Сондай-ақ мынадай мінез-құлықты белгілеуге болады: анимация шекті нүктеге жетіп, кері оралады (transition-тегідей). Төмендегі сипаттаманы қараңыз.

Синтаксис

селектор {
	animation-direction: normal | reverse | alternate | alternate-reverse;
}

Мәндері

Мәні	Сипаттамасы
`reverse`	Анимация кері бағытта ойнатылады.
`alternate`	Анимация алдымен тура, содан кейін кері бағытта ойнатылады (transition сияқты).
`alternate-reverse`	Анимация соңғы жағдайдан бастапқыға дейін және керісінше ойнатылады. Негізіnde бұл `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 тегіс ауысулар, элементке түсіру кезіндегі анимацияны ұсынады