CSS3 animation-fill-mode Eigenschaft
Beispiel
Bewegen Sie ein Objekt mit einer Animation von einem Ort zum anderen und lassen Sie es dort:
Selbst ausprobieren »
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft unterstützt.
Die Zahl unmittelbar vor -webkit-, -ms- oder -moz- ist die erste Browserversion, die die mit Präfix versehene Eigenschaft unterstützt.
| Eigenschaft | |||||
|---|---|---|---|---|---|
| animation-fill-mode | 4.0 -webkit- | 10.0 | 16.0 5.0 -moz- |
4.0 -webkit- | 15.0 -webkit- 12.1 12.0 -o- |
Definition und Verwendung
Die Eigenschaft animation-fill-mode legt den Stil fest, der auf ein Element angewendet wird, wenn die Animation nicht läuft (wenn sie beendet ist oder wenn sie eine Verzögerung hat und noch nicht gestartet ist).
Standardmäßig wirkt sich eine CSS-Animation nicht auf ein Element aus, bevor das erste Keyframe abgespielt wird, und sie beeinflusst das Element nicht mehr, nachdem das letzte Keyframe abgeschlossen ist. Die Eigenschaft animation-fill-mode kann dieses Verhalten überschreiben.
| Standardwert: | none |
|---|---|
| Vererbt: | nein |
| Animierbar: | Nein. SieheAnimierbar (animierbar)。 |
| Version: | CSS3 |
| JavaScript-Syntax: | object.style.animationFillMode="forwards" Probieren Sie es selbst aus |
CSS-Syntax
Eigenschaftswert
| Wert | Beschreibung |
|---|---|
| none | Standardwert. Die Animation wendet weder vor noch nach der Ausführung der Animation Stile auf das Zielelement an. |
| forwards | Nach dem Ende der Animation (bestimmt durch animation-iteration-count) wendet die Animation die Eigenschaftswerte an. |
| backwards | Die Animation wendet die in den Keyframes definierten Eigenschaftswerte an, die die erste Iteration der Animation während des durch animation-delay definierten Zeitraums starten. Dies sind die Werte aus dem `from`-Keyframe (wenn `animation-direction` "normal" oder "alternate" ist) oder die Werte aus dem `to`-Keyframe (wenn `animation-direction` "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 dehnt die Animationseigenschaften in beide Richtungen aus. |
| initial | Setzt diese Eigenschaft auf ihren Standardwert. Siehe.initial。 |
| inherit | Erbt diese Eigenschaft vom übergeordneten Element. Sieheinherit。 |
Ähnliche Artikel
CSS3-Tutorial:CSS3-Animationen
Weitere Erweiterungen