CSS animation-fill-mode-Eigenschaft
Die animation-fill-mode-Eigenschaft legt einen Stil für das Element fest, wenn die Animation nicht ausgeführt wird (vor dem Start, nach dem Ende oder beides).
Die Eigenschaft animation-fill-mode ist eine der CSS3-Eigenschaften.
Die animation-fill-mode-Eigenschaft ist die einzige Eigenschaft, die das Element vor dem Abspielen des ersten @keyframes oder nach dem Abspielen des letzten Keyframes beeinflusst. Sie kann folgende Werte annehmen: „forwards“, um anzugeben, dass das Element die vom letzten Keyframe festgelegten Stilwerte beibehalten soll (abhängig von den Eigenschaften animation-iteration-count und animation-direction); „backwards“, um anzugeben, dass das Element die vom ersten Keyframe festgelegten Stilwerte übernehmen und diese während der animation-delay-Phase beibehalten soll (abhängig von animation-direction); „both“, um anzugeben, dass die Animation den Regeln für sowohl „forwards“ als auch „backwards“ folgt, und „none“ (Standard), um anzugeben, dass vor oder nach der Ausführung der Animation keine Stile auf das Element angewendet werden.
Wenn für die Animation-Abkürzungseigenschaften mehrere durch Kommas getrennte Werte angegeben werden, werden diese auf die entsprechenden Animationen angewendet, die in animation-name definiert sind.
| Anfangswert | none |
|---|---|
| Gilt für | Alle Elemente. Gilt auch für ::before und ::after Pseudo-Elemente. |
| Vererbbar | Nein. |
| Animierbar | Nein. |
| Version | CSS3 |
| DOM-Syntax | object.style.animationFillMode = "forwards"; |
Syntax
Syntax der CSS animation-fill-mode-Eigenschaft
animation-fill-mode: none | forwards | backwards | both | initial | inherit;Beispiel für die animation-fill-mode-Eigenschaft mit dem Wert „forwards“:
Beispiel für die CSS animation-fill-mode-Eigenschaft mit dem Wert „forwards“
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: #1c87c9;
position: relative;
animation: element 5s;
animation-fill-mode: forwards;
}
@keyframes element {
from {
top: 0px;
}
to {
top: 200px;
background-color: #8ebf42;
}
}
</style>
</head>
<body>
<h2>Animation-fill-mode example</h2>
<div></div>
</body>
</html>Beispiel für die animation-fill-mode-Eigenschaft mit dem Wert „backwards“:
Beispiel für die CSS animation-fill-mode-Eigenschaft mit dem Wert „backwards“
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: #1c87c9;
position: relative;
animation: element 5s;
animation-fill-mode: backwards;
}
@keyframes element {
from {
top: 0px;
}
to {
top: 200px;
background-color: #8ebf42;
}
}
</style>
</head>
<body>
<h2>Animation-fill-mode example</h2>
<div></div>
</body>
</html>Werte
| Wert | Beschreibung |
|---|---|
| none | Dies ist der Standardwert. Die Animation wendet vor und nach dem Start keine Stile auf das Element an. |
| forwards | Gibt an, dass das Element die vom letzten Keyframe festgelegten Stilwerte beibehalten soll. |
| backwards | Gibt an, dass das Element die vom ersten Keyframe festgelegten Stilwerte übernehmen und diese während der animation-delay-Phase beibehalten soll. |
| both | Gibt an, dass die Animation den Regeln für sowohl „forwards“ als auch „backwards“ folgt. |
| initial | Legt fest, dass die Eigenschaft ihren Standardwert verwendet. |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Praxis
Die animation-fill-mode-Eigenschaft hat folgende Werte, außer: