CSS - Eigenschaft animation-fill-mode
Beispiel
Lassen Sie das <div>-Element die Stilwerte des letzten Keyframes beibehalten, wenn die Animation endet:
div {
animation-fill-mode: forwards;
}
Weitere „Probieren Sie es selbst“-Beispiele weiter unten.
Definition und Verwendung
Die animation-fill-mode
Eigenschaft gibt einen Stil für das Element an, wenn die Animation nicht abgespielt wird (bevor sie beginnt, nachdem sie endet oder beides).
CSS-Animationen wirken sich nicht auf das Element aus, bevor der erste Keyframe wiedergegeben wird oder nachdem der letzte Keyframe wiedergegeben wird. Die animation-fill-mode
Eigenschaft kann dieses Verhalten überschreiben.
Standardwert: | keiner |
---|---|
Vererbt: | Nein |
Animierbar: | Nein. Lesen Sie mehr über animierbare |
Ausführung: | CSS3 |
JavaScript-Syntax: | Objekt .style.animationFillMode="forwards" |
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt.
Zahlen gefolgt von -webkit-, -moz- oder -o- geben die erste Version an, die mit einem Präfix funktioniert hat.
Property | |||||
---|---|---|---|---|---|
animation-fill-mode | 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.1 12.0 -o- |
CSS-Syntax
animation-fill-mode: none|forwards|backwards|both|initial|inherit;
Eigenschaftswerte
Value | Description |
---|---|
none | Default value. Animation will not apply any styles to the element before or after it is executing |
forwards | The element will retain the style values that is set by the last keyframe (depends on animation-direction and animation-iteration-count) |
backwards | The element will get the style values that is set by the first keyframe (depends on animation-direction), and retain this during the animation-delay period |
both | The animation will follow the rules for both forwards and backwards, extending the animation properties in both directions |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Mehr Beispiele
Beispiel
Lassen Sie das <div>-Element die vom ersten Schlüsselbild festgelegten Stilwerte abrufen, bevor die Animation beginnt (während der Animationsverzögerungszeit):
div {
animation-fill-mode: backwards;
}
Beispiel
Lassen Sie das <div>-Element die vom ersten Schlüsselbild festgelegten Stilwerte erhalten, bevor die Animation beginnt, und behalten Sie die Stilwerte vom letzten Schlüsselbild bei, wenn die Animation endet:
div {
animation-fill-mode: both;
}
Verwandte Seiten
CSS-Tutorial: CSS-Animationen
HTML-DOM-Referenz: animationFillMode-Eigenschaft