CSS animation-fill-mode Eigenschaft

Die Eigenschaft animation-fill-mode legt fest, wie eine CSS-Animation Stile auf ihr Ziel-Element anwendet, außerhalb der Zeit, in der sie tatsächlich abläuft — also bevor sie beginnt und nachdem sie endet.

Standardmäßig gestaltet eine @keyframes-Animation ein Element nur während der Wiedergabe. Sobald die Animation endet, springt das Element zurück zu den Stilen, die sein normales CSS vorgibt. Wenn ein animation-delay gesetzt ist, zeigt das Element während dieser Wartezeit ebenfalls seine normalen Stile. Mit animation-fill-mode lässt sich dieses Verhalten ändern, sodass das Element nach dem Ende den letzten Frame beibehalten oder vor dem Start den ersten Frame übernehmen kann. Sie ist eine der CSS3-Eigenschaften.

Warum animation-fill-mode wichtig ist

Ein häufiges Problem: Sie animieren ein Element von unsichtbar zu sichtbar, aber sobald die Animation endet, verschwindet es wieder — weil die zugrunde liegende Regel noch opacity: 0 vorgibt. Mit animation-fill-mode: forwards bleibt das Element auf seinem letzten Keyframe, sodass es sichtbar bleibt. Das ist der mit Abstand häufigste Grund, warum diese Eigenschaft verwendet wird.

Die vier sinnvollen Werte lassen sich klar dem Zeitpunkt zuordnen, an dem ein Frame festgehalten wird:

none (Standard) — das Element verwendet seine normalen Stile vor und nach der Animation. Keyframes gelten nur während der Wiedergabe.
forwards — nach dem Ende der Animation behält das Element die Stile des letzten Keyframes (den to/100%-Frame bei normalem Ablauf). Welcher Frame gewählt wird, hängt von animation-iteration-count und animation-direction ab.
backwards — während der animation-delay-Periode vor dem Start zeigt das Element bereits die Stile des ersten Keyframes (abhängig von animation-direction).
both — wendet die Regeln für forwards und backwards an: der erste Frame wird während der Verzögerung beibehalten, und der letzte Frame bleibt nach dem Ende der Animation erhalten.

Wenn Sie der animation-Kurzschreibweise mehrere kommagetrennte Werte übergeben, gilt jeder Fill-Mode für die entsprechende Animation in animation-name.

Anfangswert	none
Gilt für	Alle Elemente. Gilt auch für die Pseudo-Elemente ::before und ::after.
Vererbbar	Nein.
Animierbar	Nein.
Version	CSS3
DOM-Syntax	object.style.animationFillMode = "forwards";

Syntax

Syntax der CSS animation-fill-mode Eigenschaft

animation-fill-mode: none | forwards | backwards | both | initial | inherit;

Beispiel der animation-fill-mode Eigenschaft mit dem Wert "forwards":

Beispiel der CSS animation-fill-mode Eigenschaft mit dem Wert forwards

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #1c87c9;
        position: relative;
        animation: element 5s;
        animation-fill-mode: forwards;
      }
      @keyframes element {
        from {
          top: 0px;
        }
        to {
          top: 200px;
          background-color: #8ebf42;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-fill-mode example</h2>
    <div></div>
  </body>
</html>

Probier es selbst »

Mit forwards endet das Feld 200px tiefer und grün — und bleibt dort, anstatt zur Ausgangsposition und Blaufärbung zurückzuspringen.

Beispiel der animation-fill-mode Eigenschaft mit dem Wert "backwards":

Beispiel der CSS animation-fill-mode Eigenschaft mit dem Wert backwards

backwards hat nur dann einen sichtbaren Effekt, wenn ein animation-delay vorhanden ist: Während der Verzögerung zeigt das Element bereits den ersten Keyframe. Hier befindet sich das Feld bereits an seiner from-Position, und die Seite wartet 2 Sekunden, bevor die Bewegung beginnt.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #8ebf42;
        position: relative;
        top: 200px;
        animation: element 3s;
        animation-delay: 2s;
        animation-fill-mode: backwards;
      }
      @keyframes element {
        from {
          top: 0px;
          background-color: #1c87c9;
        }
        to {
          top: 200px;
          background-color: #8ebf42;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-fill-mode example</h2>
    <div></div>
  </body>
</html>

Probier es selbst »

Während der 2-sekündigen Verzögerung befindet sich das Feld bei top: 0 und ist blau — der erste Keyframe — anstatt des grünen, 200px-tiefer-Stils aus der eigenen Regel des Elements.

Beispiel der animation-fill-mode Eigenschaft mit dem Wert "both":

Beispiel der CSS animation-fill-mode Eigenschaft mit dem Wert both

both kombiniert beides: Der erste Keyframe bleibt während der Verzögerung erhalten, dann läuft die Animation und der letzte Keyframe wird danach beibehalten.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #1c87c9;
        position: relative;
        animation: element 3s;
        animation-delay: 2s;
        animation-fill-mode: both;
      }
      @keyframes element {
        from {
          top: 0px;
        }
        to {
          top: 200px;
          background-color: #8ebf42;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-fill-mode example</h2>
    <div></div>
  </body>
</html>

Werte

Wert	Beschreibung
none	Dies ist der Standardwert. Die Animation wendet vor und nach dem Start keine Stile auf das Element an.
forwards	Legt fest, dass das Element die Stilwerte des letzten Keyframes beibehalten soll.
backwards	Legt fest, dass das Element die Stilwerte des ersten Keyframes übernehmen und während des animation-delay-Zeitraums beibehalten soll.
both	Legt fest, dass die Animation die Regeln sowohl für forwards als auch für backwards befolgen soll.
initial	Setzt die Eigenschaft auf ihren Standardwert zurück.
inherit	Erbt die Eigenschaft vom übergeordneten Element.

Übung

Die animation-fill-mode Eigenschaft hat folgende Werte, außer:

forwardsbackwardsalternate