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 #333333;
  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 Kurzschreibweiseigenschaft animation zu verwenden, um alle Animationseigenschaften auf einmal festzulegen.

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 behält die berechneten Werte, die durch das letzte im Verlauf der Ausführung betrachtete keyframe gesetzt wurden. Das letzte Keyframe hängt von dem Wert von animation-direction und animation-iteration-count ab:

`animation-direction`	`animation-iteration-count`	letztes betrachtetes 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 ob sie in einem Satz will-change Eigenschaftswerten enthalten wären. Wenn ein neuer Stacking-Kontext während der Animation erstellt wurde, behält das Zielelement den Stacking-Kontext bei, nachdem die Animation abgeschlossen ist.

backwards

Die Animation wird die in dem ersten relevanten keyframe definierten Werte anwenden, sobald sie auf das Ziel angewandt wird, und diese während der animation-delay Periode beibehalten. Das erste relevante Keyframe hängt von dem 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 forwards als auch backwards und dehnt somit die Animationseigenschaften in beide Richtungen aus.

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

Hinweis: animation-fill-mode hat die gleiche Wirkung beim Erstellen von CSS scroll-gesteuerten Animationen wie bei regulären, zeitbasierten Animationen.

Formale Definition

Anfangswert	`none`
Anwendbar auf	alle Elemente, `::before` und `::after` Pseudoelemente
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	Not animatable

Formale Syntax

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

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

Beispiele

Fill-Modus einstellen

Im folgenden Beispiel können Sie den Effekt von animation-fill-mode sehen. Es zeigt, wie Sie die Animation im Endzustand verbleiben lassen können, anstatt zum Originalzustand 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 #cccccc;
  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

Verwendung von CSS-Animationen
JavaScript AnimationEvent API
Andere verwandte Animationseigenschaften: animation, animation-composition, animation-delay, animation-direction, animation-duration, animation-iteration-count, animation-name, animation-play-state, animation-timeline, animation-timing-function

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden