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

Browser Kompatibilit├Ąt

BCD tables only load in the browser

Siehe auch