Animation-direction xususiyati

animation-direction xususiyati animatsiya yo‘nalishini belgilaydi. Standart holatda animatsiya faqat 1 marta takrorlanadi va keyin boshlang‘ich holatiga qaytadi, shundan so‘ng, agar animation-delay kechikish belgilangan bo‘lsa, belgilangan vaqt kutadi va keyin sikl boshidan boshlanadi.

Ushbu xususiyat bu xatti-harakni o‘zgartirishga imkon beradi, masalan, animatsiya tugagach, boshlang‘ich holatiga sakrab o‘tish o‘rniga tugash nuqtasida qolishi uchun.

Shuningdek, quyidagi xatti-harakni belgilash mumkin: animatsiya chekka nuqtaga yetib boradi va orqaga qaytadi (transition dagi kabi). Quyidagi tavsifga qarang.

Sintaksis

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

Qiymatlar

Qiymat	Tavsif
`reverse`	Animatsiya teskari yo‘nalishda ijro etiladi.
`alternate`	Animatsiya avval to‘g‘ri, keyin esa teskari yo‘nalishda ijro etiladi (transition kabi).
`alternate-reverse`	Animatsiya oxirgi holatdan boshlang‘ich holatga va orqaga ijro etiladi. Aslida bu `alternate` va `reverse` qiymatlarining birlashmasidir.
`normal`	Animatsiya boshlang‘ichdan oxirigacha ijro etiladi, oxiriga yetgach esa sakrab boshlang‘ich holatiga o‘tadi.

Standart qiymat: normal.

Misol

Hozir element bir tomonga harakatlanadi, keyin esa orqaga qaytadi, chunki alternate qiymati belgilangan. Bunda animation-duration qiymati 3 soniya, bu esa "borish" va "qaytish" harakatlarining har biri 3 soniya davom etishini anglatadi:

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

Misol

Hozir element teskari tomonga harakatlanadi (chapdan o‘ngga emas, balki o‘ngdan chapga):

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

Misol

Hozir element oldinga va orqaga harakatlanadi, lekin teskari yo‘nalishda (chapdan boshlanishi kerak, lekin o‘ngdan boshlanadi):

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

Shuningdek qarang

animation-name xususiyati,
animatsiya nomini belgilaydi
animation-duration xususiyati,
animatsiya davomiyligini belgilaydi
animation-delay xususiyati,
animatsiyani boshlashdan oldingi kechikishni belgilaydi
animation-timing-function xususiyati,
animatsiya bajarilish tezligini belgilaydi
animation-iteration-count xususiyati,
animatsiya takrorlanishlar sonini belgilaydi
animation-fill-mode xususiyati,
animatsiya holatini belgilaydi
animation-play-state xususiyati,
animatsiyani pauzaga olish imkonini beradi
animation xususiyati,
animatsiyalar uchun qisqartma sifatida ishlatiladi
@keyframes komandasi,
animatsiya kalit kadrlarini belgilaydi
transition silliq o‘tishlar, elementga sichqoncha olib borilganda ishlaydigan animatsiyalardir