Az animation-fill-mode tulajdonság

A animation-fill-mode tulajdonság beállítja, hogy az animáció milyen pozícióban álljon meg a befejezés után. Alapértelmezetten az animáció visszatér az eredeti értékre, és ez nem mindig mutat szépen.

Szintaxis

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

Értékek

Alapértelmezett érték: none.

Példa . None érték

Ebben a példában a margin-left értéke 300px az elem esetében, az animáció első képkockájáé pedig 0px. Mivel nincs késleltetés animation-delay, ezért az elem az oldal betöltése után 0px lesz, nem pedig 300px. Ezen kívül az animáció a befejezés után visszaugrik a kezdeti értékre:

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

Результат:

Példa . None érték

Ebben a példában a margin-left értéke 300px az elem esetében, az animáció első képkockájáé pedig 0px. Ezen kívül az elem esetében be van állítva a animation-delay 3 másodpercre, ezért az elem az oldal betöltése után 300px lesz, nem pedig 0px, és 3 másodpercig ott áll, majd az animáció kezdete után ugrásszerűen átvált 0px - és az animáció onnan indul. Ezen kívül az animáció a befejezés után visszaugrik a kezdeti értékre:

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

Результат:

Példa . Backwards érték

Ebben a példában a margin-left értéke 300px az elem esetében, az animáció első képkockájáé pedig 0px. Ezen kívül az elem esetében a animation-fill-mode értéke backwards, ezért az elem az oldal betöltése után 0px lesz, nem pedig 300px, mint az a animation-fill-mode none értéke esetén volt. Ezen kívül az animáció a befejezés után visszaugrik a kezdeti értékre:

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

Результат:

Példa . None érték és az ismétlések száma 1

Ebben a példában a margin-left értéke 300px az elem esetében, az animáció első képkockájáé pedig 0px. Ezen kívül az elem esetében be van állítva a animation-delay 3 másodpercre, ezért az elem az oldal betöltése után 300px lesz, nem pedig 0px, és 3 másodpercig ott áll, majd az animáció kezdete után ugrásszerűen átvált 0px - és az animáció onnan indul. Mivel a animation-fill-mode értéke none, ezért az animáció lejátszása után az elem visszatér a kezdeti értékre:

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

Результат:

Példa . Forwards érték és az ismétlések száma 1

Ebben a példában a animation-fill-mode értéke forwards, a az animáció ismétléseinek száma pedig 1. Az animáció lejátszása után az elem abban a helyzetben marad, ahol az animáció véget ért, nem pedig visszaugrik a kiindulási pontba.

Ezen kívül a margin-left értéke 300px az elem esetében, az animáció első képkockájáé pedig 0px. Ezen kívül az elem esetében be van állítva a animation-delay 3 másodpercre, ezért az elem az oldal betöltése után 300px lesz, nem pedig 0px, és 3 másodpercig ott áll, majd az animáció kezdete után ugrásszerűen átvált 0px - és az animáció onnan indul:

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

Результат:

Példa . Both érték és az ismétlések száma 1

Ebben a példában a animation-fill-mode értéke both, a az animáció ismétléseinek száma pedig 1. Az oldal betöltése után az elem az animáció első képkockáján áll (0px, nem 300px), az animáció lejátszása után pedig az elem abban a helyzetben marad, ahol az animáció véget ért, nem pedig visszaugrik a kiindulási pontba:

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

Результат:

Lásd még