animation-fill-mode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Die animation-fill-mode CSS Eigenschaft legt fest, wie eine CSS-Animation Stile auf ihr Ziel vor und nach ihrer Ausführung anwendet.

Probieren Sie es aus

Es ist oft praktisch, die Kurzschreibweiseigenschaft animation zu verwenden, um alle Animationseigenschaften auf einmal festzulegen.

Syntax

css
/* Single animation */
animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;

/* Multiple animations */
animation-fill-mode: none, backwards;
animation-fill-mode: both, forwards, none;

/* Global values */
animation-fill-mode: inherit;
animation-fill-mode: initial;
animation-fill-mode: revert;
animation-fill-mode: revert-layer;
animation-fill-mode: unset;

Werte

none

Die Animation wird keine Stile auf das Ziel anwenden, wenn sie nicht ausgeführt wird. Das Element wird stattdessen mit allen anderen darauf angewendeten CSS-Regeln angezeigt. Dies ist der Standardwert.

forwards

Das Ziel wird die berechneten Werte beibehalten, die durch das letzte während der Ausführung aufgetretene keyframe festgelegt wurden. Das letzte Keyframe hängt vom Wert von animation-direction und animation-iteration-count ab:

animation-direction animation-iteration-count letztes aufgetretenes Keyframe
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

Animierte Eigenschaften verhalten sich, als seien sie in einem will-change Eigenschaftswert enthalten. Wenn während der Animation ein neuer Stacking-Kontext erstellt wurde, behält das Zielelement den Stacking-Kontext bei, nachdem die Animation beendet ist.

backwards

Die Animation wird die in dem ersten relevanten keyframe definierten Werte anwenden, sobald sie auf das Ziel angewendet wird, und diese während der animation-delay-Periode beibehalten. Das erste relevante Keyframe hängt vom Wert von animation-direction ab:

animation-direction erstes relevantes Keyframe
normal oder alternate 0% oder from
reverse oder alternate-reverse 100% oder to
both

Die Animation folgt den Regeln sowohl für vorwärts als auch rückwärts, wodurch die Animationseigenschaften in beide Richtungen erweitert werden.

Hinweis: Wenn Sie mehrere durch Kommata getrennte Werte für eine animation-* Eigenschaft angeben, werden sie in der Reihenfolge der Erscheinung der animation-names auf die Animationen angewendet. Für Situationen, in denen die Anzahl der Animationen und die animation-* Eigenschaftswerte nicht übereinstimmen, siehe Setzen mehrerer Animations-Eigenschaftswerte.

Hinweis: animation-fill-mode hat denselben Effekt beim Erstellen von CSS-scroll-gesteuerten Animationen wie bei regulären zeitbasierten Animationen.

Formale Definition

Initialer Wertnone
Anwendbar aufalle Elemente, ::before und ::after Pseudoelemente
VererbtNein
Berechneter Wertwie angegeben
AnimationstypNot animatable

Formale Syntax

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

<single-animation-fill-mode> =
none |
forwards |
backwards |
both

Beispiele

Fill-Modus festlegen

Sie können den Effekt von animation-fill-mode im folgenden Beispiel sehen. Es zeigt, wie Sie die Animation in ihrem Endzustand verbleiben lassen können, anstatt zum ursprünglichen Zustand zurückzukehren (was der Standard ist).

HTML

html
<p>Move your mouse over the gray box!</p>
<div class="demo">
  <div class="grows-and-stays">This grows and stays big.</div>
  <div class="grows">This just grows.</div>
</div>

CSS

css
.demo {
  border-top: 100px solid #ccc;
  height: 300px;
}

@keyframes grow {
  0% {
    font-size: 0;
  }
  100% {
    font-size: 40px;
  }
}

.demo:hover .grows {
  animation-name: grow;
  animation-duration: 3s;
}

.demo:hover .grows-and-stays {
  animation-name: grow;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

Ergebnis

Weitere Beispiele finden Sie unter CSS-Animationen.

Spezifikationen

Specification
CSS Animations Level 1
# animation-fill-mode

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch