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