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

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

<p>Die <code>animation-delay</code> <a href="/en-US/docs/CSS" title="CSS">CSS</a> Eigenschaft gibt an, wann eine Animation starten soll. Dies lässt die Animationssequenz einige Zeit später starten nachdem sie einem Element zugewiesen wurde.</p>

<p>Ein Wert von <code>0s</code>, welcher der Standardwert für die Eigenschaft ist, gibt an, dass die Animation starten soll sobald sie zugewiesen wird. Andernfalls legt der Wert eine Verzögerung von dem Moment fest, an dem die Animation dem Element zugewiesen wird; die Animation startet um diesen Wert verzögert nachdem sie zugewiesen wurde.</p>

<p>Falls ein negativer Wert für die Animationsverzögerung zugewiesen wird,  wird die Animation sofort ausgeführt. Jedoch wird sie so dargestellt, als ob sie vor dem Animationszyklus begonnen hat. Zum Beispiel, wenn Sie <code>-1s</code> als die Animationsverzögerungszeit angeben, wird die Animation sofort starten, allerdings 1 Sekunde innerhalb der Animationssequenz.</p>

<p>Falls Sie einen negativen Wert für die Animationsverzögerung angeben, der Startwert jedoch implizit ist, wird der Moment, an dem die Animation dem Element zugewiesen wird, als Startwert verwendet.</p>

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

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

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

<pre class="twopartsyntaxbox">{{csssyntax}}
</pre>

<pre>animation-delay: 3s
animation-delay: 2s, 4ms
</pre>

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

<dl>
 <dt><code>&lt;time&gt;</code></dt>
 <dd>Der Zeitversatz von dem Zeitpunkt, an dem die Animation dem Element zugewiesen wird, nach dem die Animation starten soll. Dieser kann entweder in Sekunden angegeben werden (mittels <code>s</code> als Einheit) oder in Millisekunden (mittels <code>ms</code> als Einheit). Falls keine Einheit angegeben wird, ist der Ausdruck ungültig.</dd>
</dl>

<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="Spezifikation">Spezifikation</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-delay', 'animation-delay')}}</td>
   <td>{{Spec2('CSS3 Animations')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">Browser-Kompatibilität</h2>

{{Compat("css.properties.animation-delay")}}

<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>