`animation-name` CSS property

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit September 2015 browserübergreifend verfügbar.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Die CSS-Eigenschaft animation-name gibt die Namen von einer oder mehreren @keyframes-At-Regeln an, die die auf ein Element anzuwendende Animation beschreiben. Mehrere @keyframes-At-Regeln werden als durch Kommas getrennte Liste von Namen angegeben. Wenn der angegebene Name mit keiner @keyframes-At-Regel übereinstimmt, werden keine Eigenschaften animiert.

Oft ist es praktisch, die Kurzform-Eigenschaft animation zu verwenden, um alle Animationseigenschaften auf einmal festzulegen.

Probieren Sie es aus

animation-name: none;

animation-name: slide;

animation-name: bounce;

<section class="flex-column" id="default-example">
  <div class="animating" id="example-element"></div>
</section>

#example-element {
  animation-direction: alternate;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in;
  background-color: #1766aa;
  border-radius: 50%;
  border: 5px solid #333333;
  color: white;
  height: 150px;
  margin: auto;
  margin-left: 0;
  width: 150px;
}

@keyframes slide {
  from {
    background-color: orange;
    color: black;
    margin-left: 0;
  }
  to {
    background-color: orange;
    color: black;
    margin-left: 80%;
  }
}

@keyframes bounce {
  from {
    background-color: orange;
    color: black;
    margin-top: 0;
  }
  to {
    background-color: orange;
    color: black;
    margin-top: 40%;
  }
}

Syntax

css

/* No animation */
animation-name: none;

/* Single animation */
animation-name: test_05;
animation-name: -specific;
animation-name: "sliding-vertically";

/* Multiple animations */
animation-name: test1, animation4;
animation-name:
  none,
  -moz-specific,
  sliding;

/* Global values */
animation-name: inherit;
animation-name: initial;
animation-name: revert;
animation-name: revert-layer;
animation-name: unset;

Werte

Diese Eigenschaft wird als ein oder mehrere durch Kommas getrennte Werte angegeben:

none: Ein spezielles Schlüsselwort, das keine Keyframes bezeichnet. Es kann verwendet werden, um eine Animation zu deaktivieren, ohne die Reihenfolge der anderen Bezeichner zu ändern, oder um aus der Kaskade stammende Animationen zu deaktivieren.
<custom-ident>: Ein Name ohne Anführungszeichen, der die Animation identifiziert. Dieser Bezeichner besteht aus einer Kombination von Groß- und Kleinschreibung unterscheidenden Buchstaben a bis z, Zahlen 0 bis 9, Unterstrichen (_) und/oder Bindestrichen (-). Das erste Zeichen, das kein Bindestrich ist, muss ein Buchstabe sein. Außerdem sind zwei Bindestriche am Anfang des Bezeichners verboten. Darüber hinaus darf der Bezeichner nicht none, unset, initial oder inherit sein.
<string>: Eine Zeichenfolge, die denselben Regeln wie benutzerdefinierte Bezeichner folgt, wie oben beschrieben, mit Ausnahme, dass sie von doppelten (") oder einfachen (') Anführungszeichen umgeben ist. Wenn sowohl für animation-name als auch für den Namen der entsprechenden @keyframes-At-Regel eine Zeichenfolge in Anführungszeichen verwendet wird, sind none, globale Schlüsselwörter und Namen, die mit einem Unterstrich oder zwei Bindestrichen beginnen, gültig, jedoch nicht empfohlen.

Hinweis: Wenn Sie mehrere durch Kommas getrennte Werte für eine animation-*-Eigenschaft angeben, werden sie in der Reihenfolge auf die Animationen angewendet, in der die animation-names erscheinen. Informationen zu Situationen, in denen die Anzahl der Animationen und der Werte der animation-*-Eigenschaft nicht übereinstimmt, finden Sie unter Mehrere Werte für Animationseigenschaften festlegen.

Formale Definition

Anfangswert	`none`
Anwendbar auf	alle Elemente, `::before` und `::after` Pseudoelemente
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	Not animatable

Formale Syntax

animation-name = 
  [ none | <keyframes-name> ]#  

<keyframes-name> = 
  <custom-ident>  |
  <string>

Beispiele

Eine Animation benennen

Diese Animation hat den animation-name rotate.

HTML

html

<div class="box"></div>

CSS

css

.box {
  background-color: rebeccapurple;
  border-radius: 10px;
  width: 100px;
  height: 100px;
}

.box:hover {
  animation-name: rotate;
  animation-duration: 0.7s;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}