Sifa animation-direction

Sifa animation-direction huweka mwelekeo wa animation. Kwa chaguo-msingi animation inarudiwa mara 1 tu na kisha kurudi kwenye hali yake ya kwanza, kisha, kama imewekwa kucheleweshwa animation-delay, itasubiri muda uliowekwa na kisha mzunguko utaanza upya.

Sifa hii inaruhusu kubadilisha tabia hii, kwa mfano, ili animation baada ya kumalizika ibaki mahali pale ilipomaliza, badala ya kuruka kurudi kwenye nafasi ya kwanza.

Pia unaweza kuweka tabia kama hii: animation itafika hadi kwenye hatua ya mwisho na kurudi nyuma (kama katika transition). Tazama maelezo hapa chini.

Kisarufu

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

Thamani

Thamani	Maelezo
`reverse`	Animation itachezwa kwa mwelekeo wa nyuma.
`alternate`	Animation itachezwa kwanza kwa mwelekeo wa mbele, kisha kwa mwelekeo wa nyuma (kama transition).
`alternate-reverse`	Animation itachezwa kutoka kwenye nafasi ya mwisho hadi ya kwanza na kurudi nyuma. Kimsingi hii ni thamani `alternate` na `reverse` zikiwa pamoja.
`normal`	Animation itachezwa kutoka mwanzo hadi mwisho, na baada ya kumalizika itaruka kwa ghafla kurudi kwenye nafasi ya kwanza.

Thamani chaguo-msingi: normal.

Mfano

Sasa kipengele kitasogea kwa upande mmoja, kisha kurudi nyuma, kwa sababu imewekwa thamani alternate. Wakati huo huo animation-duration ina thamani ya 3 sekunde na hii inamaanisha kuwa uhamisho "huko" na "hapa" uta chukua 3 sekunde:

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

Mfano

Sasa kipengele kitasogea kwa mwelekeo wa nyuma (inapaswa kutoka kushoto kwenda kulia, lakini itakuwa kutoka kulia kwenda kushoto):

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

Mfano

Sasa kipengele kitasogea huko na hapa, lakini kwa mwelekeo wa nyuma (inapaswa kuanza kushoto, lakini itaanza kulia):

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

Tazama pia

sifa animation-name,
ambayo huweka jina la animation
sifa animation-duration,
ambayo huweka muda wa animation
sifa animation-delay,
ambayo huweka kucheleweshwa kabla ya utekelezaji wa animation
sifa animation-timing-function,
ambayo huweka kasi ya utekelezaji wa animation
sifa animation-iteration-count,
ambayo huweka idadi ya kurudiwa kwa animation
sifa animation-fill-mode,
ambayo huweka hali ya animation
sifa animation-play-state,
ambayo inaruhusu kuweka animation kwenye pause
sifa animation,
inayowakilisha kifupi cha animations
amri @keyframes,
inayoweka muafaka muhimu ya animation
miendo laini transition, inayowakilisha animation kwa kuweka kipengele