Својство 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, који представљају анимацију при прелазу преко елемента