---
title: animation-name
slug: Web/CSS/animation-name
tags:
  - CSS
  - CSS Animationen
  - CSS Eigenschaft
  - Experimentell
  - Layout
  - Referenz
  - Web
translation_of: Web/CSS/animation-name
---
<div>{{CSSRef}}</div>

<h2 id="Übersicht">Übersicht</h2>

<p>Die <code>animation-name</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft definiert eine Liste von Animationen, welche dem Element zugeortnet werden sollen. Jeder name steht für eine {{cssxref("@keyframes")}} Regel, welche den Ablauf der Animation definiert.</p>

<p>Meistens wird die Kurzform {{cssxref("animation")}} genutzt, um alle Eigenschaften der Animation auf einen Blick zu haben.</p>

<p>{{cssinfo}}</p>

<h2 id="Syntax">Syntax</h2>

<pre class="brush:css">animation-name: none;
animation-name: test_05;
animation-name: -specific;
animation-name: sliding-vertically;

animation-name: test1;
animation-name: test1, animation4;
animation-name: none, -moz-specific, sliding;

/* Globale Werte */
animation-name: initial;
animation-name: inherit;
animation-name: unset;
</pre>

<h3 id="Werte">Werte</h3>

<dl>
 <dt><code>none</code></dt>
 <dd>Keine Animation soll abgespielt werden. Dieser Wert ermöglicht das deaktivieren einer Animation, ohne die dazugehörigen Eigenschaften und Regeln zu ändern.</dd>
 <dt><code>IDENT</code></dt>
 <dd>Eine beliebige Zeichenkette aus den Buchstaben <code>a</code> bis <code>z</code>, Zahlen <code>0</code> bis <code>9</code>, Bodenstriche (<code>_</code>), und oder Bindestriche (<code>-</code>). Das erste Zeichen muss ein Buchstabe oder einer der beiden zugelassenen Striche sein. Es dürfen nicht zwei hintereinandeflogende Striche am Anfang stehen.</dd>
</dl>

<h3 id="Formale_Syntax">Formale Syntax</h3>

{{csssyntax}}

<h2 id="Beispiele">Beispiele</h2>

<p>Siehe <a href="/de/docs/Web/Guide/CSS/CSS_Animationen_nutzen" title="CSS/CSS_animations">CSS Animationen</a> für Beispiele.</p>

<h2 id="Spezifikationen">Spezifikationen</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Anmerkung</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Animations', '#animation-name', 'animation-name')}}</td>
   <td>{{Spec2('CSS3 Animations')}}</td>
   <td>Ursprüngliche Definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>

<p>{{Compat("css.properties.animation-name")}}</p>

<h2 id="Siehe_auch">Siehe auch</h2>

<ul>
 <li><a href="/de/docs/Web/Guide/CSS/CSS_Animationen_nutzen" title="Tutorial about CSS animations">CSS Animationen nutzen</a></li>
 <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li>
</ul>