Animation-fill-mode häsiýeti

animation-fill-mode häsiýeti animasiýanyň gutaran soň haýsy ýagdaýda durjakdygyny kesgitleýär. Deslapky ýagdaýda animasiýa başlangyç başlangyç bahasyna gaýdýar we bu örän owadan görünmese mümkin.

Syntax

selektor {
	animation-fill-mode: backwards | forwards | both | none;
}

Bahalar

Baha	Düşündiriş
`none`	Eger animasiýanyň gijä galdyrylmagy bolsa - onda gijä galdyryş wagty dowamynda element ýerinde galar, soňra sekirip `0%` kadra geçer. Animasiýa gutaran soň element duran ýerinde galmaz, başlangyç ýagdaýyna sekirip geçer.
`backwards`	Elementi sahypa ýükleneninden soň `0%` kadra hereket etmäge mejbur edýär, hatda gijä galdyryş bolsa hem `animation-delay`, we animasiýa başlamazynça ol ýerde galar. Animasiýa gutaran soň element duran ýerinde galmaz, başlangyç ýagdaýyna sekirip geçer.
`forwards`	Brauzere, animasiýa gutaran soň element duran ýerinde galjakdygyny görkezýär.
`both`	Backwards we forwards bahalaryny öz içine alýar - sahypa ýükleneninden soň element `0%` kadra ýerleşer, animasiýa gutaran soň bolsa element duran ýerinde galar.

Deslapky bahasy: none.

Mysal . None bahasy

Bu mysalda margin-left element üçin 300px bahasyna goýulýar, animasiýanyň birinji kadry üçin bolsa - 0px. Gijä galdyryş animation-delay bolmadygy üçin, sahypa ýükleneninden soň element 0px ýerleşer, 300px däl. Şeýle hem, animasiýa gutaran soň başlangyç bahasyna sekirip geçer:

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	margin-left: 300px;
	animation-fill-mode: none;
	animation-delay: 0s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Mysal . None bahasy

Bu mysalda margin-left element üçin 300px bahasyna goýulýar, animasiýanyň birinji kadry üçin bolsa - 0px. Şeýle hem element üçin gijä galdyryş animation-delay 3 sekuntda goýulýar, şonuň üçin element sahypa ýükleneninden soň 300px ýerleşer, 0px däl, we ol ýerde animasiýa başlananlaryndan soň 3 sekunt durar soňra sekirip 0px geçer - we animasiýa ol ýerden başlar. Şeýle hem,animasiýa gutaran soň başlangyç bahasyna sekirip geçer:

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	margin-left: 300px;
	animation-fill-mode: none;
	animation-delay: 0s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Mysal . Backwards bahasy

Bu mysalda margin-left element üçin 300px bahasyna goýulýar, animasiýanyň birinji kadry üçin bolsa - 0px. Şeýle hem element üçin animation-fill-mode backwards bahasyna goýulýar, şonuň üçin element sahypa ýükleneninden soň 0px ýerleşer, 300px däl, animation-fill-mode none bahasynda bolşy ýaly. Şeýle hem,animasiýa gutaran soň başlangyç bahasyna sekirip geçer:

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	margin-left: 300px;
	animation-fill-mode: backwards;
	animation-delay: 0s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Mysal . None bahasy we gaýtalanma sany 1-e deň

Bu mysalda margin-left element üçin 300px bahasyna goýulýar, animasiýanyň birinji kadry üçin bolsa - 0px. Şeýle hem element üçin gijä galdyryş animation-delay 3 sekuntda goýulýar, şonuň üçin element sahypa ýükleneninden soň 300px ýerleşer, 0px däl, we ol ýerde animasiýa başlananlaryndan soň 3 sekunt durar soňra sekirip 0px geçer - we animasiýa ol ýerden başlar. animation-fill-mode none bahasyna goýulany üçin, animasiýa ýerine ýetirilenden soň element başlangyç bahasyna gaýdar:

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	margin-left: 300px;
	animation-fill-mode: none;
	animation-delay: 3s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Mysal . Forwards bahasy we gaýtalanma sany 1-e deň

Bu mysalda animation-fill-mode forwards bahasyna goýulýar, we animasiýanyň gaýtalanma sany - 1. Animasiýa ýerine ýetirilenden soň element animasiýanyň gutaran ýerinde galar, başlangyç nokadyna sekirip geçmez.

Şeýle hem, margin-left element üçin 300px bahasyna goýulýar, animasiýanyň birinji kadry üçin bolsa - 0px. Şeýle hem element üçin gijä galdyryş animation-delay 3 sekuntda goýulýar, şonuň üçin element sahypa ýükleneninden soň 300px ýerleşer, 0px däl, we ol ýerde animasiýa başlananlaryndan soň 3 sekunt durar, soňra sekirip 0px geçer - we animasiýa ol ýerden başlar:

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	margin-left: 300px;
	animation-fill-mode: forwards;
	animation-delay: 3s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Mysal . Both bahasy we gaýtalanma sany 1-e deň

Bu mysalda animation-fill-mode both bahasyna goýulýar, we animasiýanyň gaýtalanma sany - 1. Sahypa ýükleneninden soň element animasiýanyň birinji kadrynda (0px, we 300px däl) durar, animasiýa ýerine ýetirilenden soň bolsa element animasiýanyň gutaran ýerinde galar, başlangyç nokadyna sekirip geçmez:

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	margin-left: 300px;
	animation-fill-mode: both;
	animation-delay: 3s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Şeýle hem serediň

animation-name häsiýeti,
animasiýanyň adyny kesgitleýär
animation-duration häsiýeti,
animasiýanyň dowamlylygyny kesgitleýär
animation-delay häsiýeti,
animasiýa ýerine ýetirilmezden ozal gijä galdyryşy kesgitleýär
animation-timing-function häsiýeti,
animasiýanyň ýerine ýetiriliş tizligini kesgitleýär
animation-iteration-count häsiýeti,
animasiýanyň gaýtalanma sanyny kesgitleýär
animation-direction häsiýeti,
animasiýanyň ugruny kesgitleýär
animation-play-state häsiýeti,
animasiýany pauza goýmaga mümkinçilik berýär
animation häsiýeti,
animasiýalar üçin gysga ýazgy
@keyframes buýrugy,
animasiýanyň açar kadrlaryny kesgitleýär
transition üýtgeýişler, elementiň üstüne gelende animasiýa