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 vor und nach ihrer Ausführung Stile auf ihr Ziel anwendet.

Probieren Sie es aus

animation-fill-mode: none;
animation-delay: 1s;

animation-fill-mode: forwards;
animation-delay: 1s;

animation-fill-mode: backwards;
animation-delay: 1s;

animation-fill-mode: both;
animation-delay: 1s;

<section class="flex-column" id="default-example">
  <div>Animation <span id="play-status"></span></div>
  <div id="example-element">Select a mode to start!</div>
</section>

#example-element {
  background-color: #1766aa;
  color: white;
  margin: auto;
  margin-left: 0;
  border: 5px solid #333;
  width: 150px;
  height: 150px;
  border-radius: 50%;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#play-status {
  font-weight: bold;
}

.animating {
  animation: slide 1s ease-in 1;
}

@keyframes slide {
  from {
    background-color: orange;
    color: black;
    margin-left: 0;
  }
  to {
    background-color: orange;
    color: black;
    margin-left: 80%;
  }
}

"use strict";

window.addEventListener("load", () => {
  const el = document.getElementById("example-element");
  const status = document.getElementById("play-status");

  function update() {
    status.textContent = "delaying";
    el.className = "";
    window.requestAnimationFrame(() => {
      window.requestAnimationFrame(() => {
        el.className = "animating";
      });
    });
  }

  el.addEventListener("animationstart", () => {
    status.textContent = "playing";
  });

  el.addEventListener("animationend", () => {
    status.textContent = "finished";
  });

  const observer = new MutationObserver(() => {
    update();
  });

  observer.observe(el, {
    attributes: true,
    attributeFilter: ["style"],
  });

  update();
});

Es ist oft praktisch, die Kurzschreibweise 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 den anderen angewendeten CSS-Regeln dargestellt. Dies ist der Standardwert.

forwards

Das Ziel behält die berechneten Werte, die vom letzten während der Ausführung angetroffenen keyframe festgelegt wurden. Der letzte Keyframe hängt vom Wert von animation-direction und animation-iteration-count ab:

animation-direction animation-iteration-count letzter angetroffener 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 wären sie in einem Set will-change Eigenschaftswert enthalten. Wenn während der Animation ein neuer Stapelkontext erstellt wurde, behält das Zielelement den Stapelkontext bei, nachdem die Animation abgeschlossen ist.

backwards

Die Animation wendet die im ersten relevanten keyframe definierten Werte an, sobald sie auf das Ziel angewendet wird, und behält diese während des animation-delay Zeitraums bei. Der erste relevante Keyframe hängt vom Wert von animation-direction ab:

animation-direction erster relevanter Keyframe
normal oder alternate 0% oder from
reverse oder alternate-reverse 100% oder to
both

Die Animation folgt den Regeln für sowohl forwards als auch backwards, wodurch die Animationseigenschaften in beide Richtungen erweitert werden.

Hinweis: Wenn Sie mehrere durch Komma getrennte Werte auf einer animation-* Eigenschaft angeben, werden diese in der Reihenfolge auf die Animationen angewendet, in der die animation-names erscheinen. Für Situationen, in denen die Anzahl der Animationen und animation-* Eigenschaftswerte nicht übereinstimmen, siehe Festlegen mehrerer Animations-Eigenschaftswerte.

Hinweis: animation-fill-mode hat denselben Effekt bei der Erstellung von CSS scroll-getriebenen Animationen, wie bei regulären zeitbasierten Animationen.

Formale Definition

Anfangswertnone
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

Festlegen des Fill-Modus

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

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

Siehe CSS Animationen für weitere Beispiele.

Spezifikationen

Specification
CSS Animations Level 1
# animation-fill-mode

Browser-Kompatibilität

Siehe auch