animation-fill-mode
Übersicht
animation-fill-mode
definiert den Zustand einer Animation vor und nach deren Ablauf.
Initialwert | none |
---|---|
Anwendbar auf | alle Elemente, ::before und ::after Pseudoelemente |
Vererbt | Nein |
Berechneter Wert | wie angegeben |
Animationstyp | diskret |
Syntax
<single-animation-fill-mode>#wobei
<single-animation-fill-mode> = none | forwards | backwards | both
animation-fill-mode: none
animation-fill-mode: forwards
animation-fill-mode: backwards
animation-fill-mode: both
The # indicates that several values may be given, separated by commas.
Each applies to the animation defined in the same order in animation-name.
animation-fill-mode: none, backwards
animation-fill-mode: both, forwards, none
Werte
none
- Das Element nimmt keine Werte der Animation an.
forwards
- Das Element nimmt nach Ablauf die Werte des letzten Animationsschrittes an, unter der Berücksichtigung von
animation-direction
undanimation-iteration-count
:animation-direction
animation-iteration-count
Letzte keyframe Regel normal
gerade oder ungerade 100%
oderto
reverse
gerade oder ungerade 0%
oderfrom
alternate
gerade 0%
oderfrom
alternate
ungerade 100%
oderto
alternate-reverse
gerade 100%
oderto
alternate-reverse
ungerade 0%
oderfrom
backwards
- Das Element nimmt die Werte des ersten Animationsschrittes an und behält diesen auch während der
animation-delay
Zeit.animation-direction
wird wie folgt gehandhabt:animation-direction
Erste keyframe Regel normal
oderalternate
0%
oderfrom
reverse
oderalternate-reverse
100%
oderto
both
- Vereint die Werte
backwards
undforwards
.
Beispiele
h1 {
animation-fill-mode: forwards;
}
Spezifikation
Spezifikation | Status | Anmerkung |
---|---|---|
CSS Animations Level 1 Die Definition von 'animation-fill-mode' in dieser Spezifikation. |
Arbeitsentwurf |
Browser Kompatibilität
BCD tables only load in the browser