Omadus animation-fill-mode

Omadus animation-fill-mode määrab, millises asendis animatsioon peatub pärast lõppemist. Vaikimisi naaseb animatsioon algväärtusele ja see võib välja näha mitte eriti ilus.

Süntaks

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

Väärtused

Väärtus	Kirjeldus
`none`	Kui animatsioonil on viivitus - siis viivituse aja jooksul element jääb oma kohale, seejärel hüppab `0%` kaadrile. Pärast animatsiooni lõppu element ei jää sellesse olekusse, kus see peatus, vaid hüppab tagasi algolekusse.
`backwards`	Sunni elementi lehe laadimisel liikuma `0%` kaadrile, isegi kui on seatud viivitus `animation-delay`, ja jääma sinna, kuni animatsioon algab. Pärast animatsiooni lõppu element ei jää sellesse olekusse, kus see peatus, vaid hüppab tagasi algolekusse.
`forwards`	Määrab brauserile, et pärast animatsiooni lõppu element jääb sellesse olekusse, kus see peatus.
`both`	Sisaldab endas backwards ja forwards - pärast lehe laadimist seatakse element `0%` kaadrile, ja pärast animatsiooni lõppu jääb element sinna, kus see peatus.

Vaikeväärtus: none.

Näide . Väärtus none

Selles näites on margin-left seatud väärtusele 300px elemendil, ja animatsiooni esimese kaadri jaoks - 0px. Kuna puudub viivitus animation-delay, siis element pärast lehe laadimist asub 0px, mitte 300px. Lisaks sellele hüppab animatsioon pärast lõppu tagasi algväärtusele:

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

Näide . Väärtus none

Selles näites on margin-left seatud väärtusele 300px elemendil, ja animatsiooni esimese kaadri jaoks - 0px. Samuti on elemendil seatud viivitus animation-delay 3 sekundit, seega element pärast lehe laadimist asub 300px, mitte 0px, ja jääb sinna 3 sekundit, seejärel hüppab 0px - ja animatsioon algab sealt. Lisaks sellele hüppab animatsioon pärast lõppu tagasi algväärtusele:

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

Näide . Väärtus backwards

Selles näites on margin-left seatud väärtusele 300px elemendil, ja animatsiooni esimese kaadri jaoks - 0px. Samuti on elemendil seatud animation-fill-mode väärtusel backwards, seega element pärast lehe laadimist asub 0px, mitte 300px, nagu oli animation-fill-mode väärtusel none. Lisaks sellele hüppab animatsioon pärast lõppu tagasi algväärtusele:

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

Näide . Väärtus none ja korduste arv võrdub 1

Selles näites on margin-left seatud väärtusele 300px elemendil, ja animatsiooni esimese kaadri jaoks - 0px. Samuti on elemendil seatud viivitus animation-delay 3 sekundit, seega element pärast lehe laadimist asub 300px, mitte 0px, ja jääb sinna 3 sekundit, seejärel hüppab 0px - ja animatsioon algab sealt. Kuna animation-fill-mode on seatud väärtusele none, siis pärast animatsiooni mängimist element naaseb algväärtusele:

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

Näide . Väärtus forwards ja korduste arv võrdub 1

Selles näites on animation-fill-mode seatud väärtusele forwards, ja animatsiooni korduste arv - 1. Pärast animatsiooni mängimist jääb element selle asendisse, kus animatsioon lõppes, mitte ei hüppa tagasi algpunkti.

Lisaks on margin-left seatud väärtusele 300px elemendil, ja animatsiooni esimese kaadri jaoks - 0px. Samuti on elemendil seatud viivitus animation-delay 3 sekundit, seega element pärast lehe laadimist asub 300px, mitte 0px, ja jääb sinna 3 sekundit, seejärel hüppab 0px - ja animatsioon algab sealt:

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

Näide . Väärtus both ja korduste arv võrdub 1

Selles näites on animation-fill-mode seatud väärtusele both, ja animatsiooni korduste arv - 1. Pärast lehe laadimist jääb element animatsiooni esimesse kaadrisse (0px, mitte 300px), ja pärast animatsiooni mängimist element jääb sellesse asendisse, kus animatsioon lõppes, mitte ei hüppa tagasi algpunkti:

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

Vaata ka

omadus animation-name,
mis määrab animatsiooni nime
omadus animation-duration,
mis määrab animatsiooni kestvuse
omadus animation-delay,
mis määrab viivituse enne animatsiooni käivitamist
omadus animation-timing-function,
mis määrab animatsiooni täitmise kiiruse
omadus animation-iteration-count,
mis määrab animatsiooni korduste arvu
omadus animation-direction,
mis määrab animatsiooni suuna
omadus animation-play-state,
mis võimaldab animatsiooni peatada
omadus animation,
mis on animatsioonide lühend
käsk @keyframes,
mis määrab animatsiooni võtmeraamid
sujuvad ülemineked transition, mis on animatsioon elemendi peale hõljumiseks