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

Siehe auch

• Using CSS animations
• AnimationEvent