CSS animation-name-Eigenschaft

Die animation-name-Eigenschaft gibt einen oder mehrere Namen von Animationen an, die durch die @keyframes-Regel definiert wurden und auf das ausgewählte Element angewendet werden sollen. Wenn mehrere durch Kommas getrennte Werte für eine beliebige Animationseigenschaft angegeben werden, werden diese anders den Animationen zugeordnet, die in animation-name definiert sind.

Die animation-name-Eigenschaft ist eine der CSS3-Eigenschaften.

Die animation-Kurzschreibweiseigenschaft kann verwendet werden, um alle Animationseigenschaften auf einmal festzulegen. Verschiedene Animationseigenschaften können die Animation steuern. Sie können die Iterationsdauer der Animation angeben, ob die Animation abgespielt oder pausiert werden soll und ob sie zwischen den Werten wechselt. Auch die Startzeit der Animation kann verzögert werden.

Anfangswert	none
Anwendbar auf	Alle Elemente. Gilt auch für ::before und ::after Pseudo-Elemente.
Vererbbar	Nein.
Animierbar	Nein.
Version	CSS3
DOM-Syntax	object.style.animationName = "element";

Syntax

Syntax der CSS animation-name-Eigenschaft

css

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

Beispiel für die animation-name-Eigenschaft:

Beispiel für die CSS animation-name-Eigenschaft

html

<!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>Animation-name example</h2>
    <div>The name of the animation is set as "element".</div>
  </body>
</html>

Try it Yourself »

INFO

In diesem Beispiel wird der Animationsname auf „element“ festgelegt. Sie können jeden beliebigen Namen wählen.

Werte

Wert	Beschreibung
none	Dies ist der Standardwert. Gibt an, dass keine Animation ausgeführt wird.
keyframename	Gibt den Namen der Animation an.
initial	Legt fest, dass die Eigenschaft ihren Standardwert verwendet.
inherit	Erbt die Eigenschaft vom Elternelement.

Praxis

Was macht die CSS animation-name-Eigenschaft?

Definiert den Namen der @keyframes-Animation.Ändert die Farbe eines Elements.Definiert die Geschwindigkeit der Animation.Verknüpft die Animation mit dem Element.Passt die Größe des Elements an die Bildschirmgröße an.

CSS animation-name-Eigenschaft ​

Syntax ​

Beispiel für die animation-name-Eigenschaft: ​

Werte ​

Praxis ​

CSS animation-name-Eigenschaft

Syntax

Beispiel für die animation-name-Eigenschaft:

Werte

Praxis