CSS-Eigenschaft animation-name

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>
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.

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 ist der Zweck der CSS-Eigenschaft 'animation-name'?
Finden Sie das nützlich?