animation-fill-mode

Übersicht

animation-fill-mode definiert den Zustand einer Animation vor und nach deren Ablauf.

Initialwertnone
Anwendbar aufalle Elemente, ::before und ::after Pseudoelemente
VererbtNein
Berechneter Wertwie angegeben
Animationstypdiskret

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 und animation-iteration-count:
animation-direction animation-iteration-count Letzte keyframe Regel
normal gerade oder ungerade 100% oder to
reverse gerade oder ungerade 0% oder from
alternate gerade 0% oder from
alternate ungerade 100% oder to
alternate-reverse gerade 100% oder to
alternate-reverse ungerade 0% oder from
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 oder alternate 0% oder from
reverse oder alternate-reverse 100% oder to
both
Vereint die Werte backwards und forwards.

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

Siehe auch