Уласцівасць 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, якія з'яўляюцца анімацыяй па навядзенні на элемент