Style animationFillMode Eigenschaft
Style-ObjektBeispiele
Ändern Sie die animationFillMode-Eigenschaft eines <div>-Elements:
Selbst ausprobieren »
Definition und Verwendung
Die animationFillMode-Eigenschaft legt den Stil fest, der auf ein Element angewendet wird, wenn die Animation nicht läuft (wenn die Animation beendet ist oder wenn die Animation eine Verzögerung hat und noch nicht begonnen hat).
Standardmäßig wirken sich CSS-Animationen erst auf ein Element aus, wenn der erste Keyframe abgespielt wird, und sie wirken nach Abschluss des letzten Keyframes nicht mehr auf das Element. Die animationFillMode-Eigenschaft kann dieses Verhalten überschreiben.
Browser-Unterstützung
Nur Firefox und Opera unterstützen die animationFillMode-Eigenschaft.
Syntax
Gibt die animationFillMode-Eigenschaft zurück:
Legen Sie die Eigenschaft animationFillMode fest:
Eigenschaftswerte
| Wert | Beschreibung |
|---|---|
| none | Standardwert. Die Animation wendet keine Stile auf das Zielelement an, bevor oder nachdem die Animation ausgeführt wird. |
| forwards | Nach dem Ende der Animation (bestimmt durch animation-iteration-count) wendet die Animation die Eigenschaftswerte an. |
| backwards | Die Animation wendet die Eigenschaftswerte an, die in den Keyframes der ersten Iteration der Animation definiert sind, die während des animation-delay-Zeitraums beginnt. Dies sind die Werte aus dem `from`-Keyframe (wenn `animationDirection` `"normal"` oder `"alternate"` ist) oder aus dem `to`-Keyframe (wenn `animationDirection` `"reverse"` oder `"alternate-reverse"` ist). |
| both | Die Animation folgt den Regeln sowohl für forwards als auch für backwards. Das heißt, die Animation erweitert die Animationseigenschaften in beide Richtungen. |
| initial | Setzt diese Eigenschaft auf ihren Standardwert. Sieheinitial。 |
| inherit | Erbt diese Eigenschaft von seinem Elternelement. Sieheinherit。 |
Technische Details
| Standardwert: | none |
|---|---|
| Rückgabewert: | Ein String, der die Eigenschaft animation-fill-mode eines Elements darstellt. |
| CSS-Version | CSS3 |
Ähnliche Artikel
CSS-Referenzhandbuch:animation-fill-mode-Eigenschaft
Andere Erweiterungen