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

animation-fill-mode = 
  <single-animation-fill-mode>#  

<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