animation-fill-mode

Übersicht

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

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

Wir konvertieren die Kompatibilitätsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilitätstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst!

Siehe auch

• Using CSS animations
• AnimationEvent