CSS - animation-fill-mode

Die animation-fill-mode Eigenschaft gibt einen Stil für das Element, wenn die Animation nicht abgespielt wird an (wenn es fertig ist, oder bei einer Verzögerung).

Beispiel

div {
    animation-fill-mode: forwards;
}

Definition und Verwendung

Standardmäßig wirken sich CSS-Animationen nicht auf das Element aus, bis das erste Keyframe "gespielt" wurde, und stoppt sobald der letzte Keyframe abgeschlossen ist. Die animation-fill-mode Eigenschaft kann dieses Verhalten ändern.

Standard Wert:: keine
CSS Version:: CSS3
Vererbt sich:: Nein
Animierbar:: Nein
-webkit-:: -webkit-animation-fill-mode
-moz-:: -moz-animation-fill-mode
-o-:: -o-animation-fill-mode

Browser Unterstützung

Chrome Nein

Firefox Nein

Safari Nein

Opera Nein

Edge Nein

IE Nein

Mögliche Werte

Der Eigenschaft können die hier aufgelisteten Werte zugewiesen werden.

Wert	Beschreibung
backwards	Die Animation wird die Eigenschaftswerte die im Keyframe definiert sind übernehmen, das startet die erste Iteration der Animation, während der in animation-delay definierten Zeit. Diese sind entweder die Werte der von Keyframe (wenn animation-direction "normal" oder "alternate") oder die von der Keyframe (wenn animation-direction"reverse" oder "alternate-reverse").
both	Die Animation folgt den Regeln für vorwärts und rückwärts. Das heißt, es wird die Animationseigenschaften in beide Richtungen erweitern.
forwards	Nachdem die Animation endet (durch animation-iteration-count), wird die Animation die Eigenschaftswerte die für die Zeit gelten beenden.
none	Standardwert. Die Animation wird keine Styles an das Zielelement anwenden, bevor oder nachdem sie ausgeführt wird.
initial	Setzt diese Eigenschaft auf den Standardwert.
inherit	Erbt diese Eigenschaft von seinem übergeordneten Element.