Svojstvo animation-fill-mode

Svojstvo animation-fill-mode podešava u kojoj poziciji da se zaustavi animacija po završetku. Podrazumevano, animacija se vraća u početnu vrednost i to može izgledati ne baš lepo.

Sintaksa

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

Vrednosti

Vrednost	Opis
`none`	Ako je postavljena odloženost animacije - tokom vremena odloženosti element će ostati na mestu, a onda će skokom preći na `0%` kadar. Posle završetka animacije element neće ostati u onom stanju, gde se zaustavio, već će preskočiti u početno stanje.
`backwards`	Tera element da se posle učitavanja strane pomeri ka `0%` kadru, čak i ako je postavljena odloženost `animation-delay`, i da ostane tamo, dok ne počne animacija. Posle završetka animacije element neće ostati u onom stanju, gde se zaustavio, već će preskočiti u početno stanje.
`forwards`	Određuje pregledaču da posle završetka animacije element ostane u onom stanju, gde se zaustavio.
`both`	Uključuje backwards i forwards - posle učitavanja strane element će se postaviti na `0%` kadar, a posle završetka animacije element će ostati tamo, gde se zaustavio.

Podrazumevana vrednost: none.

Primer . Vrednost none

U ovom primeru margin-left je postavljen na vrednost 300px za element, a za prvi kadar animacije - na 0px. Pošto nema odloženosti animation-delay, element će posle učitavanja strane postati na 0px, a ne na 300px. Pored toga, animacija posle završetka će preskočiti u početnu vrednost:

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

Primer . Vrednost none

U ovom primeru margin-left je postavljen na vrednost 300px za element, a za prvi kadar animacije - na 0px. Takođe za element je postavljena odloženost animation-delay od 3 sekunde, zato će element posle učitavanja strane postati na 300px, a ne na 0px, i će stajati tamo 3 sekunde posle početka animacije a onda će skokom preći na 0px - i animacija će početi odatle. Pored toga, animacija posle završetka će preskočiti u početnu vrednost:

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

Primer . Vrednost backwards

U ovom primeru margin-left je postavljen na vrednost 300px za element, a za prvi kadar animacije - na 0px. Takođe za element je postavljen animation-fill-mode u vrednosti backwards, zato će element posle učitavanja strane postati na 0px, a ne na 300px, kao što je bilo za animation-fill-mode u vrednosti none. Pored toga, animacija posle završetka će preskočiti u početnu vrednost:

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

Primer . Vrednost none i broj ponavljanja jednak 1

U ovom primeru margin-left je postavljen na vrednost 300px za element, a za prvi kadar animacije - na 0px. Takođe za element je postavljena odloženost animation-delay od 3 sekunde, zato će element posle učitavanja strane postati na 300px, a ne na 0px, i će stajati tamo 3 sekunde posle početka animacije a onda će skokom preći na 0px - i animacija će početi odatle. Pošto je animation-fill-mode postavljen u vrednosti none, onda posle puštanja animacije element će se vratiti u početnu vrednost:

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

Primer . Vrednost forwards i broj ponavljanja jednak 1

U ovom primeru animation-fill-mode je postavljen u vrednosti forwards, a broj ponavljanja animacije - na 1. Posle puštanja animacije element će ostati u onoj poziciji, gde se završila animacija, a neće skočiti u polaznu tačku.

Pored toga, margin-left je postavljen na vrednost 300px za element, a za prvi kadar animacije - na 0px. Takođe za element je postavljena odloženost animation-delay od 3 sekunde, zato će element posle učitavanja strane postati na 300px, a ne na 0px, i će stajati tamo 3 sekunde posle početka animacije, a onda će skokom preći na 0px - i animacija će početi odatle:

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

Primer . Vrednost both i broj ponavljanja jednak 1

U ovom primeru animation-fill-mode je postavljen u vrednosti both, a broj ponavljanja animacije - na 1. Posle učitavanja strane element će stajati u prvom kadru animacije (na 0px, a ne na 300px), a posle puštanja animacije element će ostati u onoj poziciji, gde se završila animacija, a neće skočiti u polaznu tačku:

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

Pogledajte takođe

svojstvo animation-name,
koje zadaje ime animacije
svojstvo animation-duration,
koje zadaje trajanje animacije
svojstvo animation-delay,
koje zadaje odloženost pre izvršenja animacije
svojstvo animation-timing-function,
koje zadaje brzinu izvršenja animacije
svojstvo animation-iteration-count,
koje zadaje broj iteracija animacije
svojstvo animation-direction,
koje zadaje smer animacije
svojstvo animation-play-state,
koje omogućava da se animacija pauzira
svojstvo animation,
koje predstavlja skraćenicu za animacije
komandu @keyframes,
koja zadaje ključne kadrove animacije
glatke prelaze transition, koji predstavljaju animaciju po prelasku mišem preko elementa