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 spezifiziert die Namen von einem oder mehreren @keyframes at-Regeln, die die Animation beschreiben, die auf ein Element angewendet werden soll. Mehrere @keyframe at-Regeln werden als kommaseparierte Liste von Namen angegeben. Wenn der angegebene Name keiner @keyframe at-Regel entspricht, werden keine Eigenschaften animiert.

Probieren Sie es aus

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

Syntax

css
/* Single animation */
animation-name: none;
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 Bezeichner zu ändern, oder um Animationen zu deaktivieren, die aus der Cascade stammen.

<custom-ident>

Ein Name, der die Animation identifiziert. Dieser Bezeichner besteht aus einer Kombination aus Groß- und Kleinschreibungssensitiven 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. Ferner darf der Bezeichner nicht none, unset, initial oder inherit sein.

Hinweis: Wenn Sie mehrere durch Kommas getrennte Werte einer animation-* Eigenschaft angeben, werden sie in der Reihenfolge auf die Animationen angewendet, in der die animation-names erscheinen. Für Situationen, in denen die Anzahl der Animationen und animation-* Eigenschaftswerte nicht übereinstimmen, siehe Festlegen mehrerer Animationswerteigenschaften.

Formale Definition

Initialer Wertnone
Anwendbar aufalle Elemente, ::before und ::after Pseudoelemente
VererbtNein
Berechneter Wertwie angegeben
AnimationstypNot animatable

Formale Syntax

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

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

Beispiele

Eine Animation benennen

Diese Animation hat einen animation-name von 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

Fahren Sie mit der 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

BCD tables only load in the browser

Siehe auch