animation-fill-mode қасиеті

animation-fill-mode қасиеті анимацияның аяқталғаннан кейін қай жерде тоқтауын белгілейді. Әдепкі бойынша анимация бастапқы мәнге оралады және бұл өте әдемі көрінбеуі мүмкін.

Синтаксис

селектор {
	animation-fill-mode: backwards | forwards | both | none;
}

Мәндері

Мән	Сипаттама
`none`	Егер анимацияға кешіктіру белгіленген болса - онда кешіктіру уақытында элемент орнында қалады, содан кейін секіру арқылы `0%` кадрға өтеді. Анимация аяқталғаннан кейін элемент тоқтаған жерінде қалмайды, бастапқы жағдайға секіреді.
`backwards`	Бет жүктелгеннен кейін элементті `0%` кадрға жылжытуға мәжбүрлейді, тіпті егер кешіктіру белгіленген болса да `animation-delay`, және анимация басталғанға дейін сол жерде қалады. Анимация аяқталғаннан кейін элемент тоқтаған жерінде қалмайды, бастапқы жағдайға секіреді.
`forwards`	Анимация аяқталғаннан кейін элемент тоқтаған жерінде қалатынын браузерге көрсетеді.
`both`	backwards және forwards қамтиды - бет жүктелгеннен кейін элемент `0%` кадрға орналасады, ал анимация аяқталғаннан кейін элемент тоқтаған жерінде қалады.

Әдепкі мәні: none.

Мысал . none мәні

Бұл мысалда margin-left элемент үшін 300px мәніне белгіленген, ал анимацияның бірінші кадры үшін - 0px. animation-delay кешіктіруі болмағандықтан, элемент бет жүктелгеннен кейін 0px болады, 300px емес. Сонымен қатар анимация аяқталғаннан кейін бастапқы мәнге секіреді:

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

Мысал . none мәні

Бұл мысалда margin-left элемент үшін 300px мәніне белгіленген, ал анимацияның бірінші кадры үшін - 0px. Сондай-ақ элемент үшін animation-delay кешіктіруі 3 секундқа белгіленген, сондықтан элемент бет жүктелгеннен кейін 300px болады, 0px емес, және анимация басталғаннан кейін 3 секунд сол жерде тұрады, содан кейін секіру арқылы 0px өтеді - және анимация сол жерден басталады. Сонымен қатар, анимация аяқталғаннан кейін бастапқы мәнге секіреді:

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

Мысал . backwards мәні

Бұл мысалда margin-left элемент үшін 300px мәніне белгіленген, ал анимацияның бірінші кадры үшін - 0px. Сондай-ақ элемент үшін animation-fill-mode backwards мәніне белгіленген, сондықтан элемент бет жүктелгеннен кейін 0px болады, 300px емес, animation-fill-mode none мәнінде болғандай. Сонымен қатар, анимация аяқталғаннан кейін бастапқы мәнге секіреді:

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

Мысал . none мәні және қайталау саны 1-ге тең

Бұл мысалда margin-left элемент үшін 300px мәніне белгіленген, ал анимацияның бірінші кадры үшін - 0px. Сондай-ақ элемент үшін animation-delay кешіктіруі 3 секундқа белгіленген, сондықтан элемент бет жүктелгеннен кейін 300px болады, 0px емес, және анимация басталғаннан кейін 3 секунд сол жерде тұрады, содан кейін секіру арқылы 0px өтеді - және анимация сол жерден басталады. animation-fill-mode none мәніне белгіленгендіктен, анимация ойнатылғаннан кейін элемент бастапқы мәнге оралады:

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

Мысал . forwards мәні және қайталау саны 1-ге тең

Бұл мысалда animation-fill-mode forwards мәніне белгіленген, ал анимацияны қайталау саны - 1. Анимация ойнатылғаннан кейін элемент анимация аяқталған жерінде қалады, бастапқы нүктеге секірмейді.

Сонымен қатар, margin-left элемент үшін 300px мәніне белгіленген, ал анимацияның бірінші кадры үшін - 0px. Сонымен қатар элемент үшін animation-delay кешіктіруі 3 секундқа белгіленген, сондықтан элемент бет жүктелгеннен кейін 300px болады, 0px емес, және анимация басталғаннан кейін 3 секунд сол жерде тұрады, содан кейін секіру арқылы 0px өтеді - және анимация сол жерден басталады:

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

Мысал . both мәні және қайталау саны 1-ге тең

Бұл мысалда animation-fill-mode both мәніне белгіленген, ал анимацияны қайталау саны - 1. Бет жүктелгеннен кейін элемент анимацияның бірінші кадрында тұрады (0px, 300px емес), ал анимация ойнатылғаннан кейін элемент анимация аяқталған жерінде қалады, бастапқы нүктеге секірмейді:

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

Сондай-ақ қараңыз

animation-name қасиеті,
анимация атауын белгілейді
animation-duration қасиеті,
анимация ұзақтығын белгілейді
animation-delay қасиеті,
анимацияны орындаудан бұрын кешіктіруді белгілейді
animation-timing-function қасиеті,
анимацияны орындау жылдамдығын белгілейді
animation-iteration-count қасиеті,
анимация қайталау санын белгілейді
animation-direction қасиеті,
анимация бағытын белгілейді
animation-play-state қасиеті,
анимацияны кідіртуге мүмкіндік береді
animation қасиеті,
анимациялар үшін қысқарту ретінде
@keyframes пәрмені,
анимация кілт кадрларын белгілейді
transition тегіс ауысулар, элементтің үстіне апару арқылы жасалатын анимацияны білдіреді