Хусусияти 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, ки аниматсие мебошанд, ки ҳангоми нишон додан ба унсур рӯй медиҳанд