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 wird. Mehrere @keyframe-At-Regeln werden als kommagetrennte Liste von Namen angegeben. Wenn der angegebene Name keiner @keyframe-At-Regel entspricht, 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 Kurzschreibweiseigenschaft animation zu verwenden, um alle Animationseigenschaften 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 Bezeichner zu ändern, oder um Animationen aus der Kaskade zu deaktivieren.

<custom-ident>

Ein unverpflichteter Name, der die Animation identifiziert. Dieser Bezeichner besteht aus einer Kombination aus Groß-/Kleinschreibung berücksichtigenden Buchstaben a bis z, Zahlen 0 bis 9, Unterstrichen (_) und/oder Bindestrichen (-). Das erste Zeichen nach einem Bindestrich 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 Folge von Zeichen, die denselben Regeln wie benutzerdefinierte Bezeichner folgt, wie oben beschrieben, mit der Ausnahme, dass sie entweder in doppelte (") oder einfache (') Anführungszeichen eingeschlossen sind. Bei der Verwendung eines in Anführungszeichen gesetzten Strings sowohl für den animation-name als auch für den entsprechenden @keyframes-At-Regelnamen 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 bei einer animation-*-Eigenschaft angeben, werden sie in der Reihenfolge angewendet, in der die animation-names erscheinen. Für Fälle, in denen die Anzahl der Animationen und der animation-*-Eigenschaftswerte nicht übereinstimmen, siehe Festlegen mehrerer Animations-Eigenschaftswerte.

Formale Definition

Anfangswertnone
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