Animation-direction hossasy

animation-direction hossasy animasiýanyň ugryny kesgitleýär. Bellenen ýagdaýda animasiýa diňe 1 gezek gaýtalanyp soňra başlangyç ýagdaýyna gaýdyp gelýär, soňra, eger kesgitlenen gysga wagt animation-delay bar bolsa, kesgitlenen wagty gözleýär we soňra gaýtalanma yzygiderliligi başdan başlaýar.

Bu hossa şu hereketi üýtgedip bilýär, mysal üçin, animasiýa gutaran soň gutarýan ýerinde galýar, başlangyç pozisiýasyna saklanmaz.

Şeýle hem şu hereketi kesgitlemek bolýar: animasiýa çäk nokadyna ýetýär we yzyna gaýdýar (transition-daky ýaly). Aşakdaky düşündirişi gözüňi aýla.

Sintaksis

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

Görnüşleri

Görnüşi	Düşündiriş
`reverse`	Animasiýa tersine ugurda ýerine ýetiriler.
`alternate`	Animasiýa ilki göni, soňra tersine ugurda ýerine ýetiriler (transition ýaly).
`alternate-reverse`	Animasiýa gutarnyk pozisiýasyndan başlangyç pozisiýasyna we yzyna ýerine ýetiriler. Esasan, bu görnüş `alternate` we `reverse` görnüşleriniň birleşmesidir.
`normal`	Animasiýa başyndan ahyryna çenli ýerine ýetiriler, soňra gutaranyndan soň sekräp başlangyç pozisiýasyna gaýdyp gelýär.

Bellenen ýagdaýdaky görnüşi: normal.

Mysal

Indi element bir ugra hereket eder, soňra yzyna gaýdyp gelýär, sebäbi alternate görnüşi kesgitlendi. Şu ýagdaýda animation-duration 3 sekunt görnüşine eýe we bu ýagdaý, "şu ýere" we "yzyna" hereketleriniň her biriniň dowamlylygy 3 sekunt bolýar:

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

Mysal

Indi element tersine ugurda hereket eder (soldan saga bolmaly, ýöne sagdan sola bolar):

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

Mysal

Indi element şu ýere-şu ýere hereket eder, ýöne tersine ugurda (soldan başlamaly, ýöne sagdan başlaýar):

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

Şeýle hem gözüňi aýla

animation-name hossasy,
animasiýanyň adyny kesgitleýär
animation-duration hossasy,
animasiýanyň dowamlylygyny kesgitleýär
animation-delay hossasy,
animasiýany ýerine ýetirmek üçin gysga wagty kesgitleýär
animation-timing-function hossasy,
animasiýany ýerine ýetiriş tizligini kesgitleýär
animation-iteration-count hossasy,
animasiýanyň gaýtalanma sanyny kesgitleýär
animation-fill-mode hossasy,
animasiýanyň ýagdaýyny kesgitleýär
animation-play-state hossasy,
animasiýany sagat duralgasyna goýmaga mümkinçilik berýär
animation hossasy,
animasiýalar üçin gysgaldyrylan görnüş
@keyframes buýrugy,
animasiýanyň açar kadrlaryny kesgitleýär
transition üýtgeşik geçişler, elementiň üstüne gelende ýerine ýetirilýän animasiýadyr