Vlastnost animation-fill-mode

Vlastnost animation-fill-mode nastavuje v jaké pozici se má animace zastavit po skončení. Ve výchozím nastavení se animace vrátí na původní hodnotu a to může vypadat ne příliš hezky.

Syntaxe

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

Hodnoty

Hodnota	Popis
`none`	Pokud je nastaveno zpoždění animace - pak během doby zpoždění prvek zůstane na místě, a poté skokem přejde na `0%` snímek. Po skončení animace prvek nezůstane ve stavu, kde se zastavil, ale skočí do počátečního stavu.
`backwards`	Nutí prvek po načtení stránky přejít na `0%` snímek, i když je nastaveno zpoždění `animation-delay`, a zůstat tam, dokud animace nezačne. Po skončení animace prvek nezůstane ve stavu, kde se zastavil, ale skočí do počátečního stavu.
`forwards`	Udává prohlížeči, že po skončení animace prvek zůstane ve stavu, kde se zastavil.
`both`	Zahrnuje backwards a forwards - po načtení stránky se prvek nastaví na `0%` snímek, a po skončení animace prvek zůstane tam, kde se zastavil.

Výchozí hodnota: none.

Příklad . Hodnota none

V tomto příkladu je margin-left nastaven na hodnotu 300px pro prvek, a pro první snímek animace - na 0px. Protože není nastaveno zpoždění animation-delay, tak se prvek po načtení stránky nastaví na 0px, a ne na 300px. Kromě toho, animace po skončení bude skákat na počáteční hodnotu:

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

Příklad . Hodnota none

V tomto příkladu je margin-left nastaven na hodnotu 300px pro prvek, a pro první snímek animace - na 0px. Také je pro prvek nastaveno zpoždění animation-delay na 3 sekundy, proto se prvek po načtení stránky nastaví na 300px, a ne na 0px, a bude tam stát 3 sekundy po začátku animace a poté skokem přejde na 0px - a animace odtud začne. Kromě toho, animace po skončení bude skákat na počáteční hodnotu:

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

Příklad . Hodnota backwards

V tomto příkladu je margin-left nastaven na hodnotu 300px pro prvek, a pro první snímek animace - na 0px. Také je pro prvek nastaven animation-fill-mode na hodnotě backwards, proto se prvek po načtení stránky nastaví na 0px, a ne na 300px, jak tomu bylo u animation-fill-mode na hodnotě none. Kromě toho, animace po skončení bude skákat na počáteční hodnotu:

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

Příklad . Hodnota none a počet opakování roven 1

V tomto příkladu je margin-left nastaven na hodnotu 300px pro prvek, a pro první snímek animace - na 0px. Také je pro prvek nastaveno zpoždění animation-delay na 3 sekundy, proto se prvek po načtení stránky nastaví na 300px, a ne na 0px, a bude tam stát 3 sekundy po začátku animace a poté skokem přejde na 0px - a animace odtud začne. Protože je animation-fill-mode nastaven na hodnotě none, tak po přehrání animace se prvek vrátí na počáteční hodnotu:

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

Příklad . Hodnota forwards a počet opakování roven 1

V tomto příkladu je animation-fill-mode nastaven na hodnotě forwards, a počet opakování animace - na 1. Po přehrání animace prvek zůstane v té pozici, kde animace skončila, a neskočí do výchozího bodu.

Kromě toho, margin-left je nastaven na hodnotu 300px pro prvek, a pro první snímek animace - na 0px. Také je pro prvek nastaveno zpoždění animation-delay na 3 sekundy, proto se prvek po načtení stránky nastaví na 300px, a ne na 0px, a bude tam stát 3 sekundy po začátku animace, a poté skokem přejde na 0px - a animace odtud začne:

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

Příklad . Hodnota both a počet opakování roven 1

V tomto příkladu je animation-fill-mode nastaven na hodnotě both, a počet opakování animace - na 1. Po načtení stránky prvek bude stát na prvním snímku animace (na 0px, a ne na 300px), a po přehrání animace prvek zůstane v té pozici, kde animace skončila, a neskočí do výchozího bodu:

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

Viz také

vlastnost animation-name,
která nastavuje jméno animace
vlastnost animation-duration,
která nastavuje dobu trvání animace
vlastnost animation-delay,
která nastavuje zpoždění před provedením animace
vlastnost animation-timing-function,
která nastavuje rychlost provedení animace
vlastnost animation-iteration-count,
která nastavuje počet opakování animace
vlastnost animation-direction,
která nastavuje směr animace
vlastnost animation-play-state,
která umožňuje pozastavit animaci
vlastnost animation,
představující zkratku pro animace
příkaz @keyframes,
nastavující klíčové snímky animace
plynulé přechody transition, představující animaci při najetí na prvek