Vetoria animation-fill-mode

Vetoria animation-fill-mode përcakton në çfarë pozite duhet të ndalet animacioni pas përfundimit. Si parazgjedhje, animacioni kthehet në vlerën e tij fillestare dhe kjo mund të duket jo shumë e bukur.

Sintaksa

përzgjedhësi {
	animation-fill-mode: backwards | forwards | both | none;
}

Vlerat

Vlera	Përshkrimi
`none`	Nëse është vendosur një vonesë animacioni - atëherë gjatë kohës së vonesës elementi do të qëndrojë në vend, dhe pastaj me kërcim do të kalojë në kornizën `0%`. Pas përfundimit të animacionit, elementi nuk do të qëndrojë në atë gjendje, ku u ndal, por do të kërcejë në gjendjen fillestare.
`backwards`	Detyron elementin të lëvizë pas ngarkimit të faqes në kornizën `0%`, edhe nëse është vendosur vonesa `animation-delay`, dhe të qëndrojë aty, derisa të fillojë animacioni. Pas përfundimit të animacionit, elementi nuk do të qëndrojë në atë gjendje, ku u ndal, por do të kërcejë në gjendjen fillestare.
`forwards`	I tregon shfletuesit që pas përfundimit të animacionit, elementi do të qëndrojë në atë gjendje, ku u ndal.
`both`	Përfshin backwards dhe forwards - pas ngarkimit të faqes, elementi do të vendoset në kornizën `0%`, dhe pas përfundimit të animacionit, elementi do të qëndrojë aty ku u ndal.

Vlera e parazgjedhur: none.

Shembull . Vlera none

Në këtë shembull, margin-left është vendosur në vlerën 300px për elementin, dhe për kornizën e parë të animacionit - në 0px. Meqë nuk ka vonesë animation-delay, elementi pas ngarkimit të faqes do të vendoset në 0px, dhe jo në 300px. Përveç kësaj, animacioni pas përfundimit do të kërcejë në vlerën fillestare:

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

Shembull . Vlera none

Në këtë shembull, margin-left është vendosur në vlerën 300px për elementin, dhe për kornizën e parë të animacionit - në 0px. Gjithashtu për elementin është vendosur vonesa animation-delay prej 3 sekondash, prandaj elementi pas ngarkimit të faqes do të vendoset në 300px, dhe jo në 0px, dhe do të qëndrojë aty 3 sekonda pas fillimit të animacionit, e më pas me kërcim do të kalojë në 0px - dhe animacioni do të fillojë prej andej. Përveç kësaj, animacioni pas përfundimit do të kërcejë në vlerën fillestare:

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

Shembull . Vlera backwards

Në këtë shembull, margin-left është vendosur në vlerën 300px për elementin, dhe për kornizën e parë të animacionit - në 0px. Gjithashtu për elementin është vendosur animation-fill-mode në vlerën backwards, prandaj elementi pas ngarkimit të faqes do të vendoset në 0px, dhe jo në 300px, siç ishte për animation-fill-mode në vlerën none. Përveç kësaj, animacioni pas përfundimit do të kërcejë në vlerën fillestare:

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

Shembull . Vlera none dhe numri i përsëritjeve është 1

Në këtë shembull, margin-left është vendosur në vlerën 300px për elementin, dhe për kornizën e parë të animacionit - në 0px. Gjithashtu për elementin është vendosur vonesa animation-delay prej 3 sekondash, prandaj elementi pas ngarkimit të faqes do të vendoset në 300px, dhe jo në 0px, dhe do të qëndrojë aty 3 sekonda pas fillimit të animacionit, e më pas me kërcim do të kalojë në 0px - dhe animacioni do të fillojë prej andej. Meqë animation-fill-mode është vendosur në vlerën none, atëherë pas luajtjes së animacionit elementi do të kthehet në vlerën fillestare:

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

Shembull . Vlera forwards dhe numri i përsëritjeve është 1

Në këtë shembull, animation-fill-mode është vendosur në vlerën forwards, ndërsa numri i përsëritjeve të animacionit - në 1. Pas luajtjes së animacionit, elementi do të qëndrojë në atë pozitë ku përfundoi animacioni, dhe nuk do të kërcejë në pikën fillestare.

Përveç kësaj, margin-left është vendosur në vlerën 300px për elementin, ndërsa për kornizën e parë të animacionit - në 0px. Gjithashtu për elementin është vendosur vonesa animation-delay prej 3 sekondash, prandaj elementi pas ngarkimit të faqes do të vendoset në 300px, dhe jo në 0px, dhe do të qëndrojë aty 3 sekonda pas fillimit të animacionit, e më pas me kërcim do të kalojë në 0px - dhe animacioni do të fillojë prej andej:

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

Shembull . Vlera both dhe numri i përsëritjeve është 1

Në këtë shembull, animation-fill-mode është vendosur në vlerën both, ndërsa numri i përsëritjeve të animacionit - në 1. Pas ngarkimit të faqes, elementi do të qëndrojë në kornizën e parë të animacionit (në 0px, dhe jo në 300px), ndërsa pas luajtjes së animacionit, elementi do të qëndrojë në atë pozitë ku përfundoi animacioni, dhe nuk do të kërcejë në pikën fillestare:

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

Shihni gjithashtu

vetoria animation-name,
e cila përcakton emrin e animacionit
vetoria animation-duration,
e cila përcakton kohëzgjatjen e animacionit
vetoria animation-delay,
e cila përcakton vonesën para ekzekutimit të animacionit
vetoria animation-timing-function,
e cila përcakton shpejtësinë e ekzekutimit të animacionit
vetoria animation-iteration-count,
e cila përcakton numrin e përsëritjeve të animacionit
vetoria animation-direction,
e cila përcakton drejtimin e animacionit
vetoria animation-play-state,
e cila lejon ndalimin e animacionit në pauzë
vetoria animation,
e cila përfaqëson një shkurtim për animacionet
komanda @keyframes,
e cila përcakton kornizat kryesore të animacionit
tranzicionet e qeta transition, të cilat përfaqësojnë një animacion me hover mbi elementin