CSS-Eigenschaft animation-fill-mode

Die Eigenschaft animation-fill-mode setzt einen Stil für das Element, wenn die Animation nicht ausgeführt wird (bevor sie beginnt, nachdem sie endet oder beides).

Die Eigenschaft animation-fill-mode ist die einzige Eigenschaft, die das Element vor der Wiedergabe des ersten @keyframe oder nach der Wiedergabe des letzten keyframes beeinflusst. Es kann die folgenden Werte haben: "forwards" gibt an, dass das Element die Style-Werte des letzten Keyframes beibehalten soll (hängt von den Eigenschaften animation-iteration-count und animation-direction an); "backwards"gibt an, dass das Element die vom ersten Keyframe gesetzten Style-Werte erhalten soll (händt von animation-direction ab) und innerhalb der Animationsverzögerungszeit halten soll; "both" gibt an, dass die Animation den Regeln sowohl "forwards" als auch "backwards" folgen soll; und "none" ist der Standardwert. Die Animation wendet keinen Stil auf das Element vor und nach dem Start an.

Anfangswert none
Gilt für Alle Elemente. Es gilt auch für die Pseudo-Elemente ::before und ::after.
Geerbt Nein
Animierbar Nein
Version CSS3
DOM Syntax object.style.animationFillMode = "forwards";

Syntax

animation-fill-mode: none | forwards | backwards | both | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style> 
      div {
      width: 100px;
      height: 100px;
      background: #1c87c9;
      position: relative;
      -webkit-animation: element 5s;  /* Safari 4.0 - 8.0 */
      -webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
      animation: element 5s;
      animation-fill-mode: forwards;
      }
      /* Safari 4.0 - 8.0 */
      @-webkit-keyframes element {
      from {top: 0px;}
      to {top: 200px; background-color: blue;}
      }
      @keyframes element {
      from {top: 0px;}
      to {top: 200px; background-color: #8ebf42;}
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für animation-fill-mode</h2>
    <div></div>
  </body>
</html>

Hier betrachten wir ein Beispiel mit dem Wert "backwards".

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style> 
      div {
      width: 100px;
      height: 100px;
      background: #1c87c9;
      position: relative;
      -webkit-animation: element 5s;  /* Safari 4.0 - 8.0 */
      -webkit-animation-fill-mode: backwords; /* Safari 4.0 - 8.0 */
      animation: element 5s;
      animation-fill-mode: backwords;
      }
      /* Safari 4.0 - 8.0 */
      @-webkit-keyframes element {
      from {top: 0px;}
      to {top: 200px; background-color: blue;}
      }
      @keyframes element {
      from {top: 0px;}
      to {top: 200px; background-color: #8ebf42;}
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für animation-fill-mode</h2>
    <div></div>
  </body>
</html>

Werte

Wert Beschreibung
none Das ist der Standardwert. Die Animation wendet keinen Stil auf das Element vor und nach dem Start an.
forwards Gibt an, dass das Element die Style-Werte des letzten Keyframes beibehalten soll.
backwords Gibt an, dass das Element die vom ersten Keyframe festgelegten Style-Werte erhalten und innerhalb animation-delay halten soll.
both Gibt an, dass die Animation den Regeln sowohl vorwärts als auch rückwärts folgen soll.
initial Es setzt die Eigenschaft auf den Standardwert.
inherit Es erbt die Eigenschaft von ihrem übergeordneten Element.

Browser-Support

chrome firefox safari opera
43.0+
4.0-42.0 -webkit-
16.0+
5.0-15.0 -moz-
9.0+
5.1-8.0 -webkit-
12.0+
15.0-29.0 -webkit-

Übe dein Wissen

Was bewirkt die CSS-Eigenschaft 'animation-fill-mode'?
Finden Sie das nützlich?