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

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

<p>Die <code>animation-direction</code> CSS Eigenschaft gibt an, ob die Animation rückwärts oder in Wechelzyklen abgespielt werden soll.</p>

<p>Es ist oft einfacher, die Kurzschreibweise {{cssxref("animation")}} zu verwenden, um alle Animationseigenschaften auf einmal zu setzen.</p>

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

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

<pre class="brush:css">/* Einzelne Animation */
animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;

/* Mehrere Animationen */
animation-direction: normal, reverse;
animation-direction: alternate, reverse, normal;

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

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

<dl>
 <dt><code>normal</code></dt>
 <dd>Die Animation wird in jedem Durchlauf vorwärts abgespielt. In anderen Worten, jedesmal, wenn der nächste Zyklus der Animation beginnt, wird die Animation auf den Anfangszustand zurückgesetzt und beginnt erneut. Dies ist die Standardeinstellung der Animationsrichtung.</dd>
 <dt><code>alternate</code></dt>
 <dd>Die Animation ändert in jedem Durchlauf die Richtung. Wenn die Animation umgekehrt abgespielt wird, werden die Animationsschritte rückwärts ausgeführt. Des weiteren werden Timingfunktionen ebenfalls umgekehrt; zum Beispiel wird eine <code>ease-in</code> Animation durch eine <code>ease-out</code> Animation ersetzt, wenn sie rückwärts abgespielt wird. Die Zählung zur Bestimmung, ob es sich um eine gerade oder ungerade Iteration handelt, beginnt bei eins.</dd>
 <dt><code>reverse</code></dt>
 <dd>Die Animation wird in jedem Durchlauf rückwärts abgespielt. Jedes Mal, wenn der nächste Zyklus der Animation beginnt, wird die Animation auf den Endzustand zurückgesetzt und beginnt erneut.</dd>
 <dt><code>alternate-reverse</code></dt>
 <dd>Die Animation wird beim ersten Durchlauf rückwärts abgespielt, beim nächsten vorwärts und fährt danach abwechselnd fort. Die Zählung zur Bestimmung, ob es sich um eine gerade oder ungerade Iteration handelt, beginnt bei eins.</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">Kommentar</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Animations', '#animation-direction', 'animation-direction')}}</td>
   <td>{{Spec2('CSS3 Animations')}}</td>
   <td>For the two new values, see the <a href="http://lists.w3.org/Archives/Public/www-style/2011May/0090.html">W3C discussion</a>.</td>
  </tr>
 </tbody>
</table>

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

<p>{{Compat("css.properties.animation-direction")}}</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>