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

Értékek

Érték	Leírás
none	Ha az animációnak késleltetés van beállítva - akkor a késleltetés ideje alatt az elem a helyén marad, majd ugrásszerűen átvált a 0% képkockára. Az animáció befejezése után az elem nem marad abban az állapotban, ahol megállt, hanem visszaugrik a kezdeti állapotba.
backwards	Arra kényszeríti az elemet, hogy az oldal betöltése után a 0% képkockára mozogjon, még akkor is, ha késleltetés van beállítva animation-delay, és ott maradjon, amíg el nem kezdődik az animáció. Az animáció befejezése után az elem nem marad abban az állapotban, ahol megállt, hanem visszaugrik a kezdeti állapotba.
forwards	Megadja a böngészőnek, hogy az animáció befejezése után az elem abban az állapotban marad, ahol megállt.
both	Magában foglalja a backwards és forwards értékeket - az oldal betöltése után az elem a 0% képkockára áll be, az animáció befejezése után pedig az elem ott marad, ahol megállt.

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:

:

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:

:

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:

:

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:

:

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:

:

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:

:

Lásd még