Beispiel
Animieren Sie etwas von einem Ort zum anderen bewegen und sie haben dort zu bleiben:
div {
-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
animation-fill-mode: forwards;
} Versuch es selber " Definition und Verwendung
Die Animation-fill-mode - Eigenschaft gibt einen Stil für das Element , wenn die Animation nicht abgespielt wird (when it is finished, or when it has a delay) .
Standardmäßig CSS - Animationen wirken sich nicht auf das Element , bis das erste Keyframe "played" , und dann stoppt , sobald der letzte Keyframe abgeschlossen hat. Die Animation-fill-mode-Eigenschaft kann dieses Verhalten zu ändern.
| Standardwert: | none |
|---|---|
| Vererbt: | no |
| Anima: | no. Read about animatable |
| Version: | CSS3 |
| JavaScript-Syntax: | object .style.animationFillMode="forwards" Try it |
Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die die Eigenschaft vollständig unterstützt.
Zahlen, gefolgt von -webkit-, -moz- oder -o- die erste Version an, die mit einem Präfix gearbeitet.
| Eigentum | |||||
|---|---|---|---|---|---|
| animation-fill-mode | 4.0 -webkit- | 10.0 | 16.0 5,0 -moz- | 4.0 -webkit- | 15,0 -webkit- 12.1 12.0 -o- |
CSS-Syntax
animation-fill-mode: none|forwards|backwards|both|initial|inherit;Eigenschaftswerte
| Wert | Beschreibung |
|---|---|
| none | Standardwert. Die Animation wird keine Arten an das Zielelement anwenden, bevor oder nachdem er 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 zu starten wird, während der Laufzeit-Animation-Verzögerung definiert. Diese sind entweder die Werte der von Keyframe (when animation-direction is "normal" or "alternate") oder die von der Keyframe (when animation-direction 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 Animationseigenschaften in beide Richtungen erweitern |
| initial | Setzt diese Eigenschaft auf den Standardwert. Lesen Sie mehr über Anfangs |
| inherit | Erbt diese Eigenschaft von seinem übergeordneten Element. Lesen Sie mehr über erben |
Verwandte Seiten
CSS3 Tutorial: CSS3 Animationen
HTML - DOM - Referenz: animationFillMode property