Lastnost animation-fill-mode

Lastnost animation-fill-mode določa, v katerem položaju se naj animacija ustavi po končanju. Privzeto se animacija vrne v začetno vrednost in to morda ni videti zelo lepo.

Sintaksa

Vrednosti

Vrednost	Opis
none	Če je nastavljena zamuda animacije - potem med časom zamude bo element ostal na mestu, nato pa bo s skokom prešel na 0% kader. Po končani animaciji element ne bo ostal v stanju, kjer se je ustavil, ampak bo preskočil v začetno stanje.
backwards	Prisili element, da se po nalaganju strani premakne na 0% kader, tudi če je nastavljena zamuda animation-delay, in tam ostane, dokler se animacija ne začne. Po končani animaciji element ne bo ostal v stanju, kjer se je ustavil, ampak bo preskočil v začetno stanje.
forwards	Določa brskalniku, da bo po končani animaciji element ostal v stanju, kjer se je ustavil.
both	Vključuje backwards in forwards - po nalaganju strani se bo element nastavil na 0% kader, po končani animaciji pa bo element ostal tam, kjer se je ustavil.

Privzeta vrednost: none.

Primer . Vrednost none

V tem primeru je margin-left nastavljen na vrednost 300px za element, za prvi kader animacije pa na 0px. Ker ni zamude animation-delay, bo element po nalaganju strani postal na 0px, ne na 300px. Poleg tega bo animacija po končanju preskočila v začetno vrednost:

:

Primer . Vrednost none

V tem primeru je margin-left nastavljen na vrednost 300px za element, za prvi kader animacije pa na 0px. Poleg tega je za element nastavljena zamuda animation-delay v 3 sekundah, zato bo element po nalaganju strani postal na 300px, ne na 0px, in bo tam stal 3 sekunde, nato pa bo s skokom prešel na 0px - in animacija se bo začela od tam. Poleg tega bo animacija po končanju preskočila v začetno vrednost:

:

Primer . Vrednost backwards

V tem primeru je margin-left nastavljen na vrednost 300px za element, za prvi kader animacije pa na 0px. Poleg tega je za element nastavljen animation-fill-mode z vrednostjo backwards, zato bo element po nalaganju strani postal na 0px, ne na 300px, kot je bilo pri animation-fill-mode z vrednostjo none. Poleg tega bo animacija po končanju preskočila v začetno vrednost:

:

Primer . Vrednost none in število ponovitev enako 1

V tem primeru je margin-left nastavljen na vrednost 300px za element, za prvi kader animacije pa na 0px. Poleg tega je za element nastavljena zamuda animation-delay v 3 sekundah, zato bo element po nalaganju strani postal na 300px, ne na 0px, in bo tam stal 3 sekunde, nato pa bo s skokom prešel na 0px - in animacija se bo začela od tam. Ker je animation-fill-mode nastavljen z vrednostjo none, se bo element po predvajanju animacije vrnil v začetno vrednost:

:

Primer . Vrednost forwards in število ponovitev enako 1

V tem primeru je animation-fill-mode nastavljen z vrednostjo forwards, število ponovitev animacije pa je 1. Po predvajanju animacije bo element ostal v tistem položaju, kjer se je animacija končala, ne pa preskočil v izhodiščno točko.

Poleg tega je margin-left nastavljen na vrednost 300px za element, za prvi kader animacije pa na 0px. Poleg tega je za element nastavljena zamuda animation-delay v 3 sekundah, zato bo element po nalaganju strani postal na 300px, ne na 0px, in bo tam stal 3 sekunde, nato pa bo s skokom prešel na 0px - in animacija se bo začela od tam:

:

Primer . Vrednost both in število ponovitev enako 1

V tem primeru je animation-fill-mode nastavljen z vrednostjo both, število ponovitev animacije pa je 1. Po nalaganju strani bo element stal v prvem kadru animacije (na 0px, ne na 300px), po predvajanju animacije pa bo element ostal v tistem položaju, kjer se je končala animacija, ne pa preskočil v izhodiščno točko:

:

Glejte tudi