Style animationFillMode Eigenschaft

Definition und Verwendung

animationFillMode Diese Eigenschaft legt fest, welche Stile auf das Element angewendet werden, wenn die Animation nicht abgespielt wird (am Ende der Animation oder mit "Verzögerung").

Standardmäßig beeinflusst die CSS-Animation ein Element, das animiert wird, nicht vor dem Abspielen des ersten Schlüsselbildes, und beeinflusst es nach dem Abspielen des letzten Schlüsselbildes nicht mehr.animationFillMode Diese Eigenschaft kann dieses Verhalten überschreiben.

Beispiel

Ändern Sie die Eigenschaft animationFillMode des <div>-Elements:

document.getElementById("myDIV").style.animationFillMode = "forwards";

Probieren Sie es selbst aus

Syntax

Rückgabe der Eigenschaft animationFillMode:

object.style.animationFillMode

Setzen Sie die Eigenschaft animationFillMode:

object.style.animationFillMode = "none|forwards|backwards|both|initial|inherit"

Eigenschaftswert

Wert Beschreibung
none Standardwert. Die Animation wendet vor oder nach der Ausführung keine Stile auf das Ziel an.
forwards Nach dem Ende der Animation (entsprechend animation-iteration-count), wird dieser Eigenschaftswert am Ende der Animation angewendet.
backwards

Innerhalb der durch animation-delay definierten Zeit wird die Animation die Eigenschaftswerte aus den Schlüsselbildern anwenden, die den ersten Durchlauf der Animation starten.

Diese stammen aus den Werten der Schlüsselbilder (wenn die Animationrichtung "normal" oder "alternate" ist) oder zu den Schlüsselbildern (wenn die Animationrichtung "reverse" oder "alternate-reverse" ist).
both Die Animation folgt den Regeln für vorwärts und rückwärts. Das bedeutet, sie erweitert die Animationseigenschaften in beide Richtungen.
initial Diese Eigenschaft wird auf ihren Standardwert gesetzt. Siehe initial.
inherit Diese Eigenschaft wird von ihrem übergeordneten Element geerbt. Siehe inherit.

Technische Details

Standardwert: none
Rückgabewert: Zeichenkette, die den animation-fill-mode-Eigenschaft.
CSS-Version: CSS3

Browserunterstützung

animationFillMode ist eine CSS3 (1999) Eigenschaft.

Es wird von allen Browsern vollständig unterstützt:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
unterstützt unterstützt unterstützt unterstützt unterstützt 11

zugehörige Seiten

CSS Referenzhandbuch:animation-fill-mode-Eigenschaft