Vlastnosť animation-fill-mode

Vlastnosť animation-fill-mode nastavuje, v akej polohe sa má animácia zastaviť po skončení. V predvolenom nastavení sa animácia vráti na pôvodnú hodnotu a to nemusí vyzerať veľmi pekne.

Syntax

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

Hodnoty

Hodnota	Popis
`none`	Ak je nastavené oneskorenie animácie - počas doby oneskorenia prvok zostane na mieste a potom skokom prejde na `0%` snímok. Po skončení animácie prvok nezostane v stave, v ktorom sa zastavil, ale skočí späť do počiatočného stavu.
`backwards`	Prinúti prvok, aby sa po načítaní stránky presunul na `0%` snímok, aj keď je nastavené oneskorenie `animation-delay`, a zostal tam, kým sa animácia nezačne. Po skončení animácie prvok nezostane v stave, v ktorom sa zastavil, ale skočí späť do počiatočného stavu.
`forwards`	Nastavuje prehliadaču, že po skončení animácie prvok zostane v stave, v ktorom sa zastavil.
`both`	Zahŕňa backwards a forwards - po načítaní stránky sa prvok nastaví na `0%` snímok a po skončení animácie prvok zostane tam, kde sa zastavil.

Predvolená hodnota: none.

Príklad . Hodnota none

V tomto príklade je margin-left nastavený na hodnotu 300px pre prvok, a pre prvý snímok animácie - na 0px. Pretože nie je oneskorenie animation-delay, prvok sa po načítaní stránky dostane na 0px, a nie na 300px. Okrem toho, po skončení animácie skočí späť na počiatoč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;
}

Príklad . Hodnota none

V tomto príklade je margin-left nastavený na hodnotu 300px pre prvok, a pre prvý snímok animácie - na 0px. Tiež je pre prvok nastavené oneskorenie animation-delay na 3 sekundy, preto sa prvok po načítaní stránky dostane na 300px, a nie na 0px, a bude tam stáť 3 sekundy, potom skokom prejde na 0px - a animácia sa odtiaľ začne. Okrem toho, po skončení animácie bude prvok skákať späť na počiatoč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;
}

Príklad . Hodnota backwards

V tomto príklade je margin-left nastavený na hodnotu 300px pre prvok, a pre prvý snímok animácie - na 0px. Tiež je pre prvok nastavený animation-fill-mode na hodnote backwards, preto sa prvok po načítaní stránky dostane na 0px, a nie na 300px, ako to bolo pri animation-fill-mode s hodnotou none. Okrem toho, po skončení animácie bude prvok skákať späť na počiatoč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;
}

Príklad . Hodnota none a počet opakovaní rovný 1

V tomto príklade je margin-left nastavený na hodnotu 300px pre prvok, a pre prvý snímok animácie - na 0px. Tiež je pre prvok nastavené oneskorenie animation-delay na 3 sekundy, preto sa prvok po načítaní stránky dostane na 300px, a nie na 0px, a bude tam stáť 3 sekundy, potom skokom prejde na 0px - a animácia sa odtiaľ začne. Pretože je animation-fill-mode nastavený na hodnote none, po prehratí animácie sa prvok vráti na počiatoč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;
}

Príklad . Hodnota forwards a počet opakovaní rovný 1

V tomto príklade je animation-fill-mode nastavený na hodnote forwards, a počet opakovaní animácie - na 1. Po prehratí animácie prvok zostane v tej polohe, kde animácia skončila, a neskočí späť do východiskového bodu.

Okrem toho, margin-left je nastavený na hodnotu 300px pre prvok, a pre prvý snímok animácie - na 0px. Tiež je pre prvok nastavené oneskorenie animation-delay na 3 sekundy, preto sa prvok po načítaní stránky dostane na 300px, a nie na 0px, a bude tam stáť 3 sekundy, potom skokom prejde na 0px - a animácia sa odtiaľ 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;
}

Príklad . Hodnota both a počet opakovaní rovný 1

V tomto príklade je animation-fill-mode nastavený na hodnote both, a počet opakovaní animácie - na 1. Po načítaní stránky bude prvok stáť na prvom snímku animácie (na 0px, a nie na 300px), a po prehratí animácie prvok zostane v tej polohe, kde animácia skončila, a neskočí späť do východiskové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;
}

Pozri tiež

vlastnosť animation-name,
ktorá nastavuje názov animácie
vlastnosť animation-duration,
ktorá nastavuje trvanie animácie
vlastnosť animation-delay,
ktorá nastavuje oneskorenie pred vykonaním animácie
vlastnosť animation-timing-function,
ktorá nastavuje rýchlosť vykonávania animácie
vlastnosť animation-iteration-count,
ktorá nastavuje počet iterácií animácie
vlastnosť animation-direction,
ktorá nastavuje smer animácie
vlastnosť animation-play-state,
ktorá umožňuje pozastaviť animáciu
vlastnosť animation,
čo je skrátený zápis pre animácie
príkaz @keyframes,
ktorý nastavuje kľúčové snímky animácie
plynulé prechody transition, čo je animácia pri prejdení myšou nad prvok