CSS-Eigenschaft animation-name

❮ Vorige Nächste ❯

Die CSS-Eigenschaft animation-name definiert den Namen von @keyframes rule, die Sie anwenden möchten. Es hat zwei Werte: none und keyframename. None ist der Standardwert, der angibt, dass es keine Animation geben wird. Keyframename gibt den Namen der Animation 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.animationName = "element";

Syntax

animation-name: keyframename | none | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
      padding: 50px;
      animation: element 4s infinite;
      }
      @keyframes  element {
      0% { background-color: #8ebf42; }
      50% { background-color: #1c87c9; }
      100% { background-color: #d5dce8; }
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für animation-name</h2>
    <div>Der Name der Animation wird als "element" festgelegt.</div>
  </body>
</html>

Versuch es selber!

Im angegebenen Beispiel wird der Name der Animation auf "element" gesetzt. Sie können einen beliebigen Namen angeben.

Werte

Wert	Beschreibung
none	Das ist der Standardwert und gibt an, dass es keine Animation geben wird.
keyframename	Es gibt den Namen der Animation an.
initial	Es setzt die Eigenschaft auf den Standardwert.
inherit	Es erbt die Eigenschaft von ihrem übergeordneten Element.