Ominaisuus animation-fill-mode

Ominaisuus animation-fill-mode määrittää mihin asemaan animaatio pysähtyy päättymisen jälkeen. Oletusarvoisesti animaatio palautuu alkuperäiseen arvoonsa, mikä saattaa näyttää ei kovin kauniilta.

Syntaksi

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

Arvot

Arvo	Kuvaus
`none`	Jos animaatiolle on asetettu viive - niin viiveen aikana elementti pysyy paikallaan, ja sitten hyppää `0%` kehykseen. Animaation päättymisen jälkeen elementti ei pysy pysähtymisensä tilassa, vaan hyppää takaisin alkutilaan.
`backwards`	Pakottaa elementin siirtymään sivun lataamisen jälkeen `0%` kehykseen, vaikka olisi asetettu viive `animation-delay`, ja pysymään siellä, kunnes animaatio alkaa. Animaation päättymisen jälkeen elementti ei pysy pysähtymisensä tilassa, vaan hyppää takaisin alkutilaan.
`forwards`	Käskee selainta, että animaation päättymisen jälkeen elementti pysyy pysähtymisensä tilassa.
`both`	Sisältää sekä backwards että forwards - sivun lataamisen jälkeen elementti asettuu `0%` kehykseen, ja animaation päättymisen jälkeen elementti pysyy pysähtymisensä tilassa.

Oletusarvo: none.

Esimerkki . Arvo none

Tässä esimerkissä margin-left on asetettu arvoon 300px elementille, ja animaation ensimmäiselle kehykselle - arvoon 0px. Koska viivettä animation-delay ei ole, niin elementti sivun lataamisen jälkeen siirtyy arvoon 0px, eikä arvoon 300px. Lisäksi animaatio päättymisen jälkeen hyppää takaisin alkuarvoonsa:

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

Esimerkki . Arvo none

Tässä esimerkissä margin-left on asetettu arvoon 300px elementille, ja animaation ensimmäiselle kehykselle - arvoon 0px. Myös elementille on asetettu viive animation-delay 3 sekuntia, joten elementti sivun lataamisen jälkeen siirtyy arvoon 300px, eikä arvoon 0px, ja pysyy siellä 3 sekuntia, minkä jälkeen se hyppää arvoon 0px - ja animaatio alkaa sieltä. Lisäksi animaatio päättymisen jälkeen hyppää takaisin alkuperäiseen arvoonsa:

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

Esimerkki . Arvo backwards

Tässä esimerkissä margin-left on asetettu arvoon 300px elementille, ja animaation ensimmäiselle kehykselle - arvoon 0px. Myös elementille on asetettu animation-fill-mode arvoon backwards, joten elementti sivun lataamisen jälkeen siirtyy arvoon 0px, eikä arvoon 300px, kuten oli animation-fill-mode:n arvolla none. Lisäksi animaatio päättymisen jälkeen hyppää takaisin alkuperäiseen arvoon:

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

Esimerkki . Arvo none ja toistojen määrä on 1

Tässä esimerkissä margin-left on asetettu arvoon 300px elementille, ja animaation ensimmäiselle kehykselle - arvoon 0px. Myös elementille on asetettu viive animation-delay 3 sekuntia, joten elementti sivun lataamisen jälkeen siirtyy arvoon 300px, eikä arvoon 0px, ja pysyy siellä 3 sekuntia, minkä jälkeen se hyppää arvoon 0px - ja animaatio alkaa sieltä. Koska animation-fill-mode on asetettu arvoon none, niin animaation toiston jälkeen elementti palaa alkuperäiseen arvoonsa:

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

Esimerkki . Arvo forwards ja toistojen määrä on 1

Tässä esimerkissä animation-fill-mode on asetettu arvoon forwards, ja animointikerrat - arvoon 1. Animaation toiston jälkeen elementti pysyy siihen asemaan, mihin animaatio päättyi, eikä hyppää takaisin lähtöpisteeseen.

Lisäksi margin-left on asetettu arvoon 300px elementille, ja animaation ensimmäiselle kehykselle - arvoon 0px. Myös elementille on asetettu viive animation-delay 3 sekuntia, joten elementti sivun lataamisen jälkeen siirtyy arvoon 300px, eikä arvoon 0px, ja pysyy siellä 3 sekuntia, minkä jälkeen se hyppää arvoon 0px - ja animaatio alkaa sieltä:

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

Esimerkki . Arvo both ja toistojen määrä on 1

Tässä esimerkissä animation-fill-mode on asetettu arvoon both, ja animointikerrat - arvoon 1. Sivun lataamisen jälkeen elementti on animaation ensimmäisessä kehyksessä (arvossa 0px, eikä arvossa 300px), ja animaation toiston jälkeen elementti pysyy siihen asemaan, mihin animaatio päättyi, eikä hyppää takaisin lähtöpisteeseen:

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

Katso myös

ominaisuus animation-name,
joka määrittää animaation nimen
ominaisuus animation-duration,
joka määrittää animaation keston
ominaisuus animation-delay,
joka määrittää viiveen ennen animaation suorittamista
ominaisuus animation-timing-function,
joka määrittää animaation nopeuden
ominaisuus animation-iteration-count,
joka määrittää animaation toistojen määrän
ominaisuus animation-direction,
joka määrittää animaation suunnan
ominaisuus animation-play-state,
joka mahdollistaa animaation pysäyttämisen
ominaisuus animation,
joka on lyhennys animaatioille
komento @keyframes,
joka määrittää animaation avainkehykset
pehmeät siirtymät transition, jotka edustavat kohdistuksen animaatiota elementtiin