animation-fill-mode xususiyati

animation-fill-mode xususiyati animatsiya tugagandan keyin qayerda to'xtashini belgilaydi. Standart holatda animatsiya o'zining boshlang'ich qiymatiga qaytadi va bu juda chiroyli ko'rinmasligi mumkin.

Sintaksis

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

Qiymatlar

Qiymat	Tavsif
`none`	Agar animatsiya kechiktirilgan bo'lsa - kechikish davomida element o'z joyida qoladi, keyin esa sakrab `0%` kadrga o'tadi. Animatsiya tugagandan so'ng element to'xtagan holatda qolmaydi, balki boshlang'ich holatga qaytadi.
`backwards`	Sahifa yuklangandan so'ng elementni `0%` kadrga o'tishga majbur qiladi, hatto agar `animation-delay` kechiktirilgan bo'lsa ham, va animatsiya boshlangunga qadar u yerda qoladi. Animatsiya tugagandan so'ng element to'xtagan joyida qolmaydi, balki boshlang'ich holatga qaytadi.
`forwards`	Brauzerga animatsiya tugagandan so'ng element to'xtagan joyida qolishini ko'rsatadi.
`both`	Backwards va forwards ni o'z ichiga oladi - sahifa yuklangandan so'ng element `0%` kadrga o'tadi, va animatsiya tugagandan so'ng element to'xtagan joyida qoladi.

Standart qiymat: none.

Misol . None qiymati

Bu misolda element uchun margin-left 300px qiymatiga o'rnatilgan, animatsiyaning birinchi kadi uchun esa 0px. animation-delay kechiktirish yo'qligi sababli, element sahifa yuklangandan so'ng 0px ga, 300px ga emas, o'tadi. Bundan tashqari, animatsiya tugagandan so'ng boshlang'ich qiymatga sakrab o'tadi:

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

Misol . None qiymati

Bu misolda element uchun margin-left 300px qiymatiga o'rnatilgan, animatsiyaning birinchi kadi uchun esa 0px. Bundan tashqari, element uchun animation-delay 3 soniyaga o'rnatilgan, shuning uchun element sahifa yuklangandan so'ng 300px ga, 0px ga emas, o'tadi, va u yerda 3 soniya turadi, keyin esa sakrab 0px ga o'tadi - va animatsiya u yerdan boshlanadi. Bundan tashqari, animatsiya tugagandan so'ng boshlang'ich qiymatga sakrab o'tadi:

<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: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Misol . Backwards qiymati

Bu misolda element uchun margin-left 300px qiymatiga o'rnatilgan, animatsiyaning birinchi kadi uchun esa 0px. Bundan tashqari, element uchun animation-fill-mode backwards qiymatiga o'rnatilgan, shuning uchun element sahifa yuklangandan so'ng 0px ga, 300px ga emas, o'tadi, animation-fill-mode none qiymatida bo'lgandek emas. Bundan tashqari, animatsiya tugagandan so'ng boshlang'ich qiymatga sakrab o'tadi:

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

Misol . None qiymati va takrorlanish soni 1

Bu misolda element uchun margin-left 300px qiymatiga o'rnatilgan, animatsiyaning birinchi kadi uchun esa 0px. Bundan tashqari, element uchun animation-delay 3 soniyaga o'rnatilgan, shuning uchun element sahifa yuklangandan so'ng 300px ga, 0px ga emas, o'tadi, va u yerda 3 soniya turadi, keyin esa sakrab 0px ga o'tadi - va animatsiya u yerdan boshlanadi. animation-fill-mode none qiymatiga o'rnatilganligi sababli, animatsiya ijro etilgandan so'ng element boshlang'ich qiymatiga qaytadi:

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

Misol . Forwards qiymati va takrorlanish soni 1

Bu misolda animation-fill-mode forwards qiymatiga o'rnatilgan, va animatsiyaning takrorlanish soni - 1. Animatsiya ijro etilgandan so'ng element animatsiya tugagan joyda qoladi, boshlang'ich nuqtaga sakramaydi.

Bundan tashqari, element uchun margin-left 300px qiymatiga o'rnatilgan, animatsiyaning birinchi kadi uchun esa 0px. Bundan tashqari element uchun animation-delay 3 soniyaga o'rnatilgan, shuning uchun element sahifa yuklangandan so'ng 300px ga, 0px ga emas, o'tadi, va u yerda 3 soniya turadi, keyin esa sakrab 0px ga o'tadi - va animatsiya u yerdan boshlanadi:

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

Misol . Both qiymati va takrorlanish soni 1

Bu misolda animation-fill-mode both qiymatiga o'rnatilgan, va animatsiyaning takrorlanish soni - 1. Sahifa yuklangandan so'ng element animatsiyaning birinchi kadrida turadi (0px da, 300px da emas), va animatsiya ijro etilgandan so'ng element animatsiya tugagan joyda qoladi, boshlang'ich nuqtaga sakramaydi:

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

Shuningdek qarang

animation-name xususiyati,
animatsiya nomini belgilaydi
animation-duration xususiyati,
animatsiya davomiyligini belgilaydi
animation-delay xususiyati,
animatsiyani bajarishdan oldin kechikishni belgilaydi
animation-timing-function xususiyati,
animatsiya bajarish tezligini belgilaydi
animation-iteration-count xususiyati,
animatsiya takrorlanishlar sonini belgilaydi
animation-direction xususiyati,
animatsiya yo'nalishini belgilaydi
animation-play-state xususiyati,
animatsiyani pauzaga olish imkonini beradi
animation xususiyati,
animatsiyalar uchun qisqartma sifatida ishlatiladi
@keyframes komandasi,
animatsiya kalit kadrlarini belgilaydi
Silliq o'tishlar transition, elementga nishonga olinganda amalga oshiriladigan animatsiyani ifodalaydi