Xüsusiyyət animation-fill-mode

Xüsusiyyət animation-fill-mode animasiya bitdikdən sonra hansı vəziyyətdə dayanacağını təyin edir. Əslanda animasiya ilkin dəyərə qayıdır və bu çox gözəl görünməyə bilər.

Sintaksis

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

Dəyərlər

Dəyər	Açıqlama
`none`	Əgər animasiya gecikməsi təyin edilibsə - gecikmə müddətində element olduğu yerdə qalacaq, sonra isə tullanaraq `0%` kadra keçəcək. Animasiya bitdikdən sonra element dayandığı vəziyyətdə qalmayacaq, əksinə ilkin vəziyyətə tullanacaq.
`backwards`	Səhifə yükləndikdən sonra elementi `0%` kadra hərəkət etdirir, hətta `animation-delay` gecikməsi təyin edilibsə belə, və animasiya başlayana qədər orada qalır. Animasiya bitdikdən sonra element dayandığı vəziyyətdə qalmayacaq, əksinə ilkin vəziyyətə tullanacaq.
`forwards`	Brauzerə animasiya bitdikdən sonra elementin dayandığı vəziyyətdə qalacağını göstərir.
`both`	Backwards və forwards dəyərlərini özündə birləşdirir - səhifə yükləndikdən sonra element `0%` kadra yerləşəcək, animasiya bitdikdən sonra isə element dayandığı yerdə qalacaq.

Standart dəyər: none.

Nümunə . None dəyəri

Bu nümunədə element üçün margin-left 300px dəyərinə təyin edilib, animasiyanın ilk kadrı üçün isə - 0px. animation-delay gecikməsi olmadığı üçün element səhifə yükləndikdən sonra 300px deyil, 0px vəziyyətində olacaq. Bundan əlavə, animasiya bitdikdən sonra ilkin dəyərə tullanacaq:

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

Nümunə . None dəyəri

Bu nümunədə element üçün margin-left 300px dəyərinə təyin edilib, animasiyanın ilk kadrı üçün isə - 0px. Həmçinin element üçün animation-delay gecikməsi 3 saniyəyə təyin edilib, buna görə də element səhifə yükləndikdən sonra 0px deyil, 300px vəziyyətində olacaq, və animasiyanın başlamasından 3 saniyə ərzində orada qalacaq, sonra isə tullanaraq 0px vəziyyətinə keçəcək - və animasiya oradan başlayacaq. Bundan əlavə, animasiya bitdikdən sonra ilkin dəyərə tullanacaq:

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

Nümunə . Backwards dəyəri

Bu nümunədə element üçün margin-left 300px dəyərinə təyin edilib, animasiyanın ilk kadrı üçün isə - 0px. Həmçinin element üçün animation-fill-mode backwards dəyərinə təyin edilib, buna görə də element səhifə yükləndikdən sonra animation-fill-mode none dəyərində olduğu kimi 300px deyil, 0px vəziyyətində olacaq. Bundan əlavə, animasiya bitdikdən sonra ilkin dəyərə tullanacaq:

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

Nümunə . None dəyəri və təkrarlanma sayı 1-ə bərabərdir

Bu nümunədə element üçün margin-left 300px dəyərinə təyin edilib, animasiyanın ilk kadrı üçün isə - 0px. Həmçinin element üçün animation-delay gecikməsi 3 saniyəyə təyin edilib, buna görə də element səhifə yükləndikdən sonra 0px deyil, 300px vəziyyətində olacaq, və animasiyanın başlamasından 3 saniyə ərzində orada qalacaq, sonra isə tullanaraq 0px vəziyyətinə keçəcək - və animasiya oradan başlayacaq. animation-fill-mode none dəyərinə təyin edildiyi üçün animasiya bitdikdən sonra element ilkin dəyərə qayıdacaq:

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

Nümunə . Forwards dəyəri və təkrarlanma sayı 1-ə bərabərdir

Bu nümunədə animation-fill-mode forwards dəyərinə təyin edilib, animasiyanın təkrarlanma sayı isə - 1. Animasiya bitdikdən sonra element animasiyanın bitdiyi vəziyyətdə qalacaq, ilkin nöqtəyə tullanmayacaq.

Bundan əlavə, element üçün margin-left 300px dəyərinə təyin edilib, animasiyanın ilk kadrı üçün isə - 0px. Həmçinin element üçün animation-delay gecikməsi 3 saniyəyə təyin edilib, buna görə də element səhifə yükləndikdən sonra 0px deyil, 300px vəziyyətində olacaq, və animasiyanın başlamasından 3 saniyə ərzində orada qalacaq, sonra isə tullanaraq 0px vəziyyətinə keçəcək - və animasiya oradan başlayacaq:

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

Nümunə . Both dəyəri və təkrarlanma sayı 1-ə bərabərdir

Bu nümunədə animation-fill-mode both dəyərinə təyin edilib, animasiyanın təkrarlanma sayı isə - 1. Səhifə yükləndikdən sonra element animasiyanın ilk kadrında olacaq (300px deyil, 0px), animasiya bitdikdən sonra isə element animasiyanın bitdiyi vəziyyətdə qalacaq, ilkin nöqtəyə tullanmayacaq:

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

Həmçinin bax

xüsusiyyət animation-name,
animasiyanın adını təyin edir
xüsusiyyət animation-duration,
animasiyanın müddətini təyin edir
xüsusiyyət animation-delay,
animasiyadan əvvəl gecikməni təyin edir
xüsusiyyət animation-timing-function,
animasiyanın sürətini təyin edir
xüsusiyyət animation-iteration-count,
animasiyanın təkrarlanma sayını təyin edir
xüsusiyyət animation-direction,
animasiyanın istiqamətini təyin edir
xüsusiyyət animation-play-state,
animasiyanı fasilə etməyə imkan verir
xüsusiyyət animation,
animasiyalar üçün qısa yazılış təşkil edir
əmri @keyframes,
animasiyanın əsas kadrlarını təyin edir
hamar keçidlər transition, elementin üzərinə gəldikdə animasiya təşkil edir