Savybė animation-fill-mode

Savybė animation-fill-mode nustato, kurioje padėtyje sustoti animacijai po pabaigos. Pagal nutylėjimą animacija grįžta į pradinę reikšmę ir tai gali atrodyti ne labai gražiai.

Sintaksė

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

Reikšmės

Reikšmė	Aprašas
`none`	Jei nustatytas animacijos delsimas - tai per delsimo laiką elementas liks savo vietoje, o po to šuoliu pereis prie `0%` kadro. Pasibaigus animacijai elementas neliks toje būsenoje, kur sustojo, o peršoks į pradinę būseną.
`backwards`	Priverčia elementą po puslapio įkėlimo judėti prie `0%` kadro, net jei nustatytas delsimas `animation-delay`, ir likti ten, kol nepradės animacija. Pasibaigus animacijai elementas neliks toje būsenoje, kur sustojo, o peršoks į pradinę būseną.
`forwards`	Nurodo naršyklei, kad pasibaigus animacijai elementas liks toje būsenoje, kur sustojo.
`both`	Apima backwards ir forwards - po puslapio įkėlimo elementas nustatysis prie `0%` kadro, o po animacijos pabaigos elementas liks ten, kur sustojo.

Reikšmė pagal nutylėjimą: none.

Pavyzdys . Reikšmė none

Šiame pavyzdyje margin-left nustatytas reikšmei 300px elementui, o pirmam animacijos kadrui - 0px. Kadangi nėra delsimo animation-delay, tai elementas po puslapio įkėlimo atsidurs 0px, o ne 300px. Be to, animacija pasibaigus šoks į pradinę reikšmę:

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

Pavyzdys . Reikšmė none

Šiame pavyzdyje margin-left nustatytas reikšmei 300px elementui, o pirmam animacijos kadrui - 0px. Taip pat elementui nustatytas delsimas animation-delay 3 sekundėms, todėl elementas po puslapio įkėlimo atsidurs 300px, o ne 0px, ir stovės ten 3 sekundes, kol prasidės animacija, o po to šuoliu pereis prie 0px - ir animacija prasidės ten. Be to, animacija pasibaigus šoks į pradinę reikšmę:

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

Pavyzdys . Reikšmė backwards

Šiame pavyzdyje margin-left nustatytas reikšmei 300px elementui, o pirmam animacijos kadrui - 0px. Taip pat elementui nustatytas animation-fill-mode reikšmėje backwards, todėl elementas po puslapio įkėlimo atsidurs 0px, o ne 300px, kaip buvo su animation-fill-mode reikšmėje none. Be to, animacija po pabaigos šoks į pradinę reikšmę:

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

Pavyzdys . Reikšmė none ir pasikartojimų skaičius lygus 1

Šiame pavyzdyje margin-left nustatytas reikšmei 300px elementui, o pirmam animacijos kadrui - 0px. Taip pat elementui nustatytas delsimas animation-delay 3 sekundėms, todėl elementas po puslapio įkėlimo atsidurs 300px, o ne 0px, ir stovės ten 3 sekundes, kol prasidės animacija, o po to šuoliu pereis prie 0px - ir animacija prasidės ten. Kadangi animation-fill-mode nustatytas reikšmėje none, tai atkūrus animaciją elementas grįš į pradinę reikšmę:

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

Pavyzdys . Reikšmė forwards ir pasikartojimų skaičius lygus 1

Šiame pavyzdyje animation-fill-mode nustatytas reikšmėje forwards, o animacijos pasikartojimų skaičius - 1. Po animacijos atkūrimo elementas liks toje padėtyje, kur baigėsi animacija, o ne šoks į pradinį tašką.

Be to, margin-left nustatytas reikšmei 300px elementui, o pirmam animacijos kadrui - 0px. Taip pat elementui nustatytas delsimas animation-delay 3 sekundėms, todėl elementas po puslapio įkėlimo atsidurs 300px, o ne 0px, ir stovės ten 3 sekundes, kol prasidės animacija, o po to šuoliu pereis prie 0px - ir animacija prasidės ten:

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

Pavyzdys . Reikšmė both ir pasikartojimų skaičius lygus 1

Šiame pavyzdyje animation-fill-mode nustatytas reikšmėje both, o animacijos pasikartojimų skaičius - 1. Po puslapio įkėlimo elementas stovės pirmame animacijos kadre (0px, o ne 300px), o po animacijos atkūrimo elementas liks toje padėtyje, kur baigėsi animacija, o ne šoks į pradinį tašką:

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

Taip pat žiūrėkite

savybė animation-name,
kuri nurodo animacijos pavadinimą
savybė animation-duration,
kuri nurodo animacijos trukmę
savybė animation-delay,
kuri nurodo delsimą prieš atliekant animaciją
savybė animation-timing-function,
kuri nurodo animacijos vykdymo greitį
savybė animation-iteration-count,
kuri nurodo animacijos iteracijų skaičių
savybė animation-direction,
kuri nurodo animacijos kryptį
savybė animation-play-state,
kuri leidžia sustabdyti animaciją
savybė animation,
kuri yra sutrumpinimas animacijoms
komanda @keyframes,
kuri nurodo animacijos pagrindinius kadrus
sklandūs perėjimai transition, kurie yra animacija užvedus pelę ant elemento