⌘K

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

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

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: 

html<div id="elem"></div>
css@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;
}

Результат:

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: 

html<div id="elem"></div>
css@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;
}

Результат:

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: 

html<div id="elem"></div>
css@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;
}

Результат:

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: 

html<div id="elem"></div>
css@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;
}

Результат:

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: 

html<div id="elem"></div>
css@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;
}

Результат:

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: 

html<div id="elem"></div>
css@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;
}

Результат:

Glejte tudi

BackLastnost animation-directionNextLastnost animation-play-state