Īpašība animation-fill-mode

Īpašība animation-fill-mode nosaka kādā pozīcijā apstājas animācija pēc beigām. Pēc noklusējuma animācija atgriežas sākotnējā vērtībā un tas var izskatīties ne pārāk glīti.

Sintakse

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

Vērtības

Vērtība	Apraksts
`none`	Ja ir iestatīta animācijas aizkave - tad aizkaves laikā elements paliks savā vietā, un pēc tam lēcienā pāries uz `0%` kadru. Pēc animācijas beigām elements nepaliks tajā stāvoklī, kur apstājās, bet lēks sākotnējā stāvoklī.
`backwards`	Liek elementam pēc lapas ielādes pārvietoties uz `0%` kadru, pat ja ir iestatīta aizkave `animation-delay`, un palikt tur, līdz sāksies animācija. Pēc animācijas beigām elements nepaliks tajā stāvoklī, kur apstājās, bet lēks sākotnējā stāvoklī.
`forwards`	Norāda pārlūkprogrammai, ka pēc animācijas beigām elements paliks tajā stāvoklī, kur apstājās.
`both`	Ietver sevī backwards un forwards - pēc lapas ielādes elements iestatīsies uz `0%` kadru, bet pēc animācijas beigām elements paliks tur, kur apstājās.

Noklusējuma vērtība: none.

Piemērs . Vērtība none

Šajā piemērā margin-left ir iestatīts vērtībā 300px elementam, bet pirmajam animācijas kadram - 0px. Tā kā nav aizkaves animation-delay, tad elements pēc lapas ielādes nostāsies uz 0px, nevis uz 300px. Turklāt animācija pēc beigām lēks sākotnējā vērtībā:

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

Piemērs . Vērtība none

Šajā piemērā margin-left ir iestatīts vērtībā 300px elementam, bet pirmajam animācijas kadram - 0px. Arī elementam ir iestatīta aizkave animation-delay 3 sekundes, tāpēc elements pēc lapas ielādes nostāsies uz 300px, nevis uz 0px, un stāvēs tur 3 sekundes pēc animācijas sākuma, un pēc tam lēcienā pāries uz 0px - un animācija sāksies no turienes. Turklāt, animācija pēc beigām lēks sākotnējā vērtībā:

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

Piemērs . Vērtība backwards

Šajā piemērā margin-left ir iestatīts vērtībā 300px elementam, bet pirmajam animācijas kadram - 0px. Arī elementam ir iestatīts animation-fill-mode vērtībā backwards, tāpēc elements pēc lapas ielādes nostāsies uz 0px, nevis uz 300px, kā tas bija animation-fill-mode vērtībā none. Turklāt, animācija pēc beigām lēks sākotnējā vērtībā:

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

Piemērs . Vērtība none un atkārtojumu skaits vienāds ar 1

Šajā piemērā margin-left ir iestatīts vērtībā 300px elementam, bet pirmajam animācijas kadram - 0px. Arī elementam ir iestatīta aizkave animation-delay 3 sekundes, tāpēc elements pēc lapas ielādes nostāsies uz 300px, nevis uz 0px, un stāvēs tur 3 sekundes pēc animācijas sākuma, un pēc tam lēcienā pāries uz 0px - un animācija sāksies no turienes. Tā kā animation-fill-mode ir iestatīts vērtībā none, tad pēc animācijas atskaņošanas elements atgriezīsies sākotnējā vērtībā:

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

Piemērs . Vērtība forwards un atkārtojumu skaits vienāds ar 1

Šajā piemērā animation-fill-mode ir iestatīts vērtībā forwards, bet animācijas atkārtojumu skaits - 1. Pēc animācijas atskaņošanas elements paliks tajā pozīcijā, kur beidzās animācija, nevis lēks sākuma punktā.

Turklāt, margin-left ir iestatīts vērtībā 300px elementam, bet pirmajam animācijas kadram - 0px. Arī elementam ir iestatīta aizkave animation-delay 3 sekundes, tāpēc elements pēc lapas ielādes nostāsies uz 300px, nevis uz 0px, un stāvēs tur 3 sekundes pēc animācijas sākuma, un pēc tam lēcienā pāries uz 0px - un animācija sāksies no turienes:

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

Piemērs . Vērtība both un atkārtojumu skaits vienāds ar 1

Šajā piemērā animation-fill-mode ir iestatīts vērtībā both, bet animācijas atkārtojumu skaits - 1. Pēc lapas ielādes elements stāvēs pirmajā animācijas kadrā (uz 0px, nevis uz 300px), bet pēc animācijas atskaņošanas elements paliks tajā pozīcijā, kur beidzās animācija, nevis lēks sākuma punktā:

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

Skatiet arī

īpašība animation-name,
kas nosaka animācijas nosaukumu
īpašība animation-duration,
kas nosaka animācijas ilgumu
īpašība animation-delay,
kas nosaka aizturi pirms animācijas izpildes
īpašība animation-timing-function,
kas nosaka animācijas izpildes ātrumu
īpašība animation-iteration-count,
kas nosaka animācijas atkārtojumu skaitu
īpašība animation-direction,
kas nosaka animācijas virzienu
īpašība animation-play-state,
kas ļauj apturēt animāciju pauzē
īpašība animation,
kas ir saīsinājums animācijām
komanda @keyframes,
kas nosaka animācijas atslēgkadrus
gludas pārejas transition, kas ir animācija, kad novieto kursoru virs elementa