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 жылмакай өтүүлөр, элементтин үстүнө чыккандагы анимацияны түзүүчү