Egenskapen animation-fill-mode

Egenskapen animation-fill-mode setter i hvilken posisjon animasjonen skal stoppe etter avslutning. Som standard returnerer animasjonen til utgangsverdien og dette kan se ikke veldig pent ut.

Syntaks

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

Verdier

Verdi	Beskrivelse
`none`	Hvis det er satt en forsinkelse på animasjonen - vil elementet i løpet av forsinkelsestiden forbli på plass, og deretter hoppe til `0%` rammen. Etter at animasjonen er avsluttet, vil ikke elementet forbli i den tilstanden, der den stoppet, men hoppe tilbake til starttilstanden.
`backwards`	Tvinger elementet til å bevege seg etter lasting av siden til `0%` rammen, selv om det er satt en forsinkelse `animation-delay`, og forbli der til animasjonen starter. Etter at animasjonen er avsluttet, vil elementet ikke forbli i den tilstanden der den stoppet, men hoppe tilbake til starttilstanden.
`forwards`	Spesifiserer til nettleseren at etter avslutning av animasjonen skal elementet forbli i den tilstanden der den stoppet.
`both`	Inkluderer både backwards og forwards - etter lasting av siden vil elementet settes til `0%` rammen, og etter avslutning av animasjonen vil elementet forbli der den stoppet.

Standardverdi: none.

Eksempel . Verdien none

I dette eksemplet er margin-left satt til verdien 300px for elementet, og for første ramme av animasjonen - til 0px. Siden det ikke er noen forsinkelse animation-delay, vil elementet etter lasting av siden stille seg til 0px, og ikke til 300px. I tillegg vil animasjonen etter avslutning hoppe tilbake til startverdien:

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

Eksempel . Verdien none

I dette eksemplet er margin-left satt til verdien 300px for elementet, og for første ramme av animasjonen - til 0px. I tillegg er det satt en forsinkelse animation-delay på 3 sekunder for elementet, derfor vil elementet etter lasting av siden stille seg til 300px, og ikke til 0px, og vil stå der 3 sekunder før animasjonen starter og deretter hoppe til 0px - og animasjonen vil starte derfra. I tillegg vil animasjonen etter avslutning hoppe tilbake til startverdien:

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

Eksempel . Verdien backwards

I dette eksemplet er margin-left satt til verdien 300px for elementet, og for første ramme av animasjonen - til 0px. I tillegg er animation-fill-mode satt til verdien backwards, derfor vil elementet etter lasting av siden stille seg til 0px, og ikke til 300px, som det var for animation-fill-mode i verdien none. I tillegg vil animasjonen etter avslutning hoppe tilbake til startverdien:

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

Eksempel . Verdien none og antall repetisjoner er 1

I dette eksemplet er margin-left satt til verdien 300px for elementet, og for første ramme av animasjonen - til 0px. I tillegg er det satt en forsinkelse animation-delay på 3 sekunder for elementet, derfor vil elementet etter lasting av siden stille seg til 300px, og ikke til 0px, og vil stå der 3 sekunder før animasjonen starter og deretter hoppe til 0px - og animasjonen vil starte derfra. Siden animation-fill-mode er satt til verdien none, vil elementet etter avspilling av animasjonen returnere til startverdien:

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

Eksempel . Verdien forwards og antall repetisjoner er 1

I dette eksemplet er animation-fill-mode satt til verdien forwards, og antall repetisjoner av animasjonen - til 1. Etter avspilling av animasjonen vil elementet forbli i den posisjonen der animasjonen sluttet, og ikke hoppe tilbake til utgangspunktet.

I tillegg er margin-left satt til verdien 300px for elementet, og for første ramme av animasjonen - til 0px. I tillegg er det satt en forsinkelse animation-delay på 3 sekunder for elementet, derfor vil elementet etter lasting av siden stille seg til 300px, og ikke til 0px, og vil stå der 3 sekunder før animasjonen starter, og deretter hoppe til 0px - og animasjonen vil starte derfra:

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

Eksempel . Verdien both og antall repetisjoner er 1

I dette eksemplet er animation-fill-mode satt til verdien both, og antall repetisjoner av animasjonen - til 1. Etter lasting av siden vil elementet stå i første ramme av animasjonen (ved 0px, og ikke ved 300px), og etter avspilling av animasjonen vil elementet forbli i den posisjonen der animasjonen sluttet, og ikke hoppe tilbake til utgangspunktet:

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

Se også

egenskapen animation-name,
som angir navnet på animasjonen
egenskapen animation-duration,
som angir varigheten av animasjonen
egenskapen animation-delay,
som angir forsinkelsen før utførelse av animasjonen
egenskapen animation-timing-function,
som angir hastigheten på utførelsen av animasjonen
egenskapen animation-iteration-count,
som angir antall iterasjoner av animasjonen
egenskapen animation-direction,
som angir retningen på animasjonen
egenskapen animation-play-state,
som lar sette animasjonen på pause
egenskapen animation,
som er en forkortelse for animasjoner
kommandoen @keyframes,
som angir nøkkelrammene for animasjonen
jevne overganger transition, som er en animasjon ved å peke på et element