CSS-Eigenschaft animation-fill-mode

❮ Vorige Nächste ❯

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>

Versuch es selber!

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>

Versuch es selber!

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.