⌘K

Svojstvo animation-fill-mode

Svojstvo animation-fill-mode podešava u kojoj poziciji da se zaustavi animacija po završetku. Podrazumevano, animacija se vraća u početnu vrednost i to može izgledati ne baš lepo.

Sintaksa

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

Vrednosti

Vrednost Opis
none Ako je postavljena odloženost animacije - tokom vremena odloženosti element će ostati na mestu, a onda će skokom preći na 0% kadar. Posle završetka animacije element neće ostati u onom stanju, gde se zaustavio, već će preskočiti u početno stanje.
backwards Tera element da se posle učitavanja strane pomeri ka 0% kadru, čak i ako je postavljena odloženost animation-delay, i da ostane tamo, dok ne počne animacija. Posle završetka animacije element neće ostati u onom stanju, gde se zaustavio, već će preskočiti u početno stanje.
forwards Određuje pregledaču da posle završetka animacije element ostane u onom stanju, gde se zaustavio.
both Uključuje backwards i forwards - posle učitavanja strane element će se postaviti na 0% kadar, a posle završetka animacije element će ostati tamo, gde se zaustavio.

Podrazumevana vrednost: none.

Primer . Vrednost none

U ovom primeru margin-left je postavljen na vrednost 300px za element, a za prvi kadar animacije - na 0px. Pošto nema odloženosti animation-delay, element će posle učitavanja strane postati na 0px, a ne na 300px. Pored toga, animacija posle završetka će preskočiti u početnu 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

U ovom primeru margin-left je postavljen na vrednost 300px za element, a za prvi kadar animacije - na 0px. Takođe za element je postavljena odloženost animation-delay od 3 sekunde, zato će element posle učitavanja strane postati na 300px, a ne na 0px, i će stajati tamo 3 sekunde posle početka animacije a onda će skokom preći na 0px - i animacija će početi odatle. Pored toga, animacija posle završetka će preskočiti u početnu 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

U ovom primeru margin-left je postavljen na vrednost 300px za element, a za prvi kadar animacije - na 0px. Takođe za element je postavljen animation-fill-mode u vrednosti backwards, zato će element posle učitavanja strane postati na 0px, a ne na 300px, kao što je bilo za animation-fill-mode u vrednosti none. Pored toga, animacija posle završetka će preskočiti u početnu 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 i broj ponavljanja jednak 1

U ovom primeru margin-left je postavljen na vrednost 300px za element, a za prvi kadar animacije - na 0px. Takođe za element je postavljena odloženost animation-delay od 3 sekunde, zato će element posle učitavanja strane postati na 300px, a ne na 0px, i će stajati tamo 3 sekunde posle početka animacije a onda će skokom preći na 0px - i animacija će početi odatle. Pošto je animation-fill-mode postavljen u vrednosti none, onda posle puštanja animacije element će se vratiti u početnu 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 i broj ponavljanja jednak 1

U ovom primeru animation-fill-mode je postavljen u vrednosti forwards, a broj ponavljanja animacije - na 1. Posle puštanja animacije element će ostati u onoj poziciji, gde se završila animacija, a neće skočiti u polaznu tačku.

Pored toga, margin-left je postavljen na vrednost 300px za element, a za prvi kadar animacije - na 0px. Takođe za element je postavljena odloženost animation-delay od 3 sekunde, zato će element posle učitavanja strane postati na 300px, a ne na 0px, i će stajati tamo 3 sekunde posle početka animacije, a onda će skokom preći na 0px - i animacija će početi odatle: 

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 i broj ponavljanja jednak 1

U ovom primeru animation-fill-mode je postavljen u vrednosti both, a broj ponavljanja animacije - na 1. Posle učitavanja strane element će stajati u prvom kadru animacije (na 0px, a ne na 300px), a posle puštanja animacije element će ostati u onoj poziciji, gde se završila animacija, a neće skočiti u polaznu tačku: 

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

Результат:

Pogledajte takođe

BackSvojstvo animation-directionNextSvojstvo animation-play-state