animation-name

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Die animation-name CSS Eigenschaft gibt die Namen von einem oder mehreren @keyframes at-rules an, die die anzuwendende Animation auf ein Element beschreiben. Mehrere @keyframes at-rules werden als kommagetrennte Liste von Namen angegeben. Wenn der angegebene Name nicht mit einem @keyframes at-rule übereinstimmt, werden keine Eigenschaften animiert.

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 #333;
  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%;
  }
}

Es ist oft praktisch, die Kurzschreibweise animation zu verwenden, um alle Animations-Eigenschaften auf einmal festzulegen.

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

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

Hinweis: Wenn Sie mehrere kommagetrennte Werte für eine animation-* Eigenschaft angeben, werden sie den Animationen in der Reihenfolge zugewiesen, in der die animation-names erscheinen. Für Fälle, in denen die Anzahl der Animationen und animation-* Eigenschaftswerte nicht übereinstimmen, siehe Mehrere Werte für Animations-Eigenschaften 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 einen animation-name mit dem Namen 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);
  }
}

Ergebnis

Bewegen Sie die Maus über das Rechteck, um die Animation zu starten.

Siehe CSS-Animationen für Beispiele.

Spezifikationen

Specification
CSS Animations Level 1 # animation-name

Browser-Kompatibilität

Siehe auch

CSS-Animationen verwenden
JavaScript AnimationEvent API
Andere verwandte Animations-Eigenschaften: animation, animation-composition, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-play-state, animation-timeline, animation-timing-function