Beispiel
Ändern der animationFillMode Eigenschaft eines <div> Element:
document.getElementById("myDIV").style.animationFillMode = "forwards";
Versuch es selber " Definition und Verwendung
Die animationFillMode Eigenschaft gibt an, welche Arten für das Element angewandt werden , wenn die Animation nicht abgespielt wird (when it is finished, or when it has a "delay") .
Standardmäßig CSS - Animationen wird das Element nicht beeinflussen Sie animieren , bis der erste Keyframe "played" , und dann hält er an, sobald die letzten Keyframe zu beeinflussen abgeschlossen hat. Die animationFillMode Eigenschaft kann dieses Verhalten außer Kraft setzen.
Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die die Eigenschaft vollständig unterstützt.
Zahlen, gefolgt von Moz geben Sie die erste Version, die mit einem Präfix gearbeitet.
| Eigentum | |||||
|---|---|---|---|---|---|
| animationFillMode | 43.0 | Nicht unterstützt | 16.0 5,0 Moz | Nicht unterstützt | 30.0 |
Syntax
Bringen Sie die animationFillMode Eigenschaft:
object .style.animationFillMode Stellen Sie die animationFillMode Eigenschaft:
object .style.animationFillMode="none|forwards|backwards|both|initial|inherit"
Eigenschaftswerte
| Wert | Beschreibung |
|---|---|
| none | Standardwert. Die Animation gilt nicht alle Stile an das Ziel vor oder nach dem es ausgeführt wird |
| forwards | Nachdem die Animation endet (determined by animation-iteration-count) , wird die Animation die Eigenschaftswerte für die Zeit gelten die Animation beendet |
| backwards | Die Animation wird die Eigenschaftswerte gelten im Keyframe definiert, die die erste Iteration der Animation beginnen wird, während der Laufzeit-Animation-Verzögerung definiert. Dies sind entweder die Werte der von der Key - Frame (when animation-direction is "normal" or "alternate") oder die der Keyframe (when animationDirection is "reverse" or "alternate-reverse") |
| both | Die Animation wird die Regeln für beide vorwärts und rückwärts. Das heißt, es wird die Animations-Eigenschaften in beiden Richtungen erweitern |
| initial | Setzt diese Eigenschaft auf den Standardwert. Lesen Sie mehr über Anfang |
| inherit | Erbt diese Eigenschaft von seinem übergeordneten Elemente. Lesen Sie mehr über erben |
Technische Details
| Standardwert: | keiner |
|---|---|
| Rückgabewert: | Ein String, die die Animation-fill-mode Eigenschaft eines Elements |
| CSS Version | CSS3 |
Verwandte Seiten
CSS - Referenz: animation-fill-mode property - animation-fill-mode property
<Style - Objekt