animation-name

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

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

Syntax

/* 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, die aus der Cascade kommen, zu deaktivieren.

<custom-ident>

Ein unquoted Name, 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. Weiterhin kann der Bezeichner nicht none, unset, initial oder inherit sein.

<string>

Eine Reihe von Zeichen, die denselben Regeln wie benutzerdefinierte Bezeichner folgt, wie oben beschrieben, außer dass sie entweder von doppelten (") oder einfachen (') Anführungszeichen umgeben sind. Wenn ein quoted String sowohl für den animation-name als auch den entsprechenden Namen der @keyframes-Regel verwendet wird, sind none, globale Schlüsselwörter und Namen, die mit einem Unterstrich oder doppelten Bindestrichen beginnen, gültig, jedoch nicht empfohlen.

Formale Definition

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

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

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.

Sehen Sie CSS-Animationen für Beispiele.

Spezifikationen

Browser-Kompatibilität

Siehe auch

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