Animation-direction хусусияти

animation-direction хусусияти анимациянинг йўналишини белгилайди. Демол бўйича анимация фақат 1 марта такрорланади ва сўнг бошланғич ҳолатга қайтади, сўнг, агар animation-delay билан кечиктиш белгиланган бўлса, белгиланган вақт кутadi ва сўнг цикл бошланади бошланғичдан.

Бу хусусият бу ҳаракатни ўзгартиришга имкон беради, масалан, анимация тугаганидан сўнг ўзи тугаган жойда қолиши учун, бошланғич жойига қайтмаслиги учун.

Шунингдек, шундай ҳаракатни белгилаш мумкин: анимация чекка нуқтага етади ва ортга қайтади (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 хусусияти,
анимациядан олдин кутish вақтини белгиловчи
animation-timing-function хусусияти,
анимация ишлаш тезлигини белгиловчи
animation-iteration-count хусусияти,
анимация такрорлар сонини белгиловчи
animation-fill-mode хусусияти,
анимация ҳолатини белгиловчи
animation-play-state хусусияти,
анимацияни тўхтатишга имкон берадиган
animation хусусияти,
анимациялар учун қисқартма
@keyframes командаси,
анимация кадрларини белгиловчи
transition ўтишлар, элемент устига чиқилгандаги анимацияни ифодаловчи