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

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 Kurzform-Eigenschaft animation zu verwenden, um alle Animationseigenschaften auf einmal zu setzen.

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 angewendeten CSS-Regeln angezeigt. Dies ist der Standardwert.

forwards

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

animation-direction animation-iteration-count letztes Schlüsselbild
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 ob sie in einem Set aus will-change enthalten wären. Wenn während der Animation ein neuer Stapelkontext erstellt wurde, behält das Zielobjekt den Stapelkontext bei, nachdem die Animation beendet ist.

backwards

Die Animation wendet die in dem ersten relevanten Schlüsselbild definierten Werte an, sobald sie auf das Ziel angewendet wird und behält diese während der animation-delay-Periode bei. Das erste relevante Schlüsselbild hängt vom Wert des animation-direction ab:

animation-direction erstes relevantes Schlüsselbild
normal oder alternate 0% oder from
reverse oder alternate-reverse 100% oder to
both

Die Animation befolgt die Regeln für sowohl vorwärts als auch rückwärts und erweitert somit die Animationseigenschaften in beide Richtungen.

Hinweis: Wenn Sie mehrere durch Kommas getrennte Werte auf einer animation-* Eigenschaft spezifizieren, werden sie in der Reihenfolge 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-gesteuerten 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

Fill-Modus setzen

Sie können die Wirkung von animation-fill-mode im folgenden Beispiel sehen. Es zeigt, wie Sie die Animation im 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

Sehen Sie CSS-Animationen für weitere Beispiele.

Spezifikationen

Specification
CSS Animations Level 1
# animation-fill-mode

Browser-Kompatibilität

Siehe auch