---
title: '@keyframes'
slug: Web/CSS/@keyframes
translation_of: Web/CSS/@keyframes
---
<div>{{CSSRef}}</div>

<h2 id="Zusammenfassung">Zusammenfassung</h2>

<p>Durch die CSS-at-Regel <code>@keyframes</code> kann der Autor die einzelnen Schritte einer CSS-Animationssequenz festlegen, indem er Keyframes (oder Wegpunkte) setzt, die während der Sequenz an bestimmten Punkten erreicht werden. Das ermöglicht eine spezifischere Kontrolle über die Zwischenschritte einer Animationssequenz gegenüber dem Ergebnis einem dem Browser überlassenen, automatisch berechneten Ablauf.</p>

<p>Die at-Regel <code>@keyframes</code> kann mit dem CSS-Objekt {{domxref("CSSKeyframesRule")}} erlangt werden.</p>

<p>Um Keyframes zu benutzen, erstellt man eine <code>@keyframes</code>-Regel mit einem Namen, der dann durch die {{ cssxref("animation-name") }}-Eigenschaft genutzt wird, um einer Animation einen Keyframe zuzuweisen. Jede <code>@keyframes</code>-Regel beinhaltet eine Style-Liste aus Keyframe-Selektoren, von denen jeder eine Prozentzahl enthält, die angibt, zu welchem relativen Zeitpunkt während der Animation der Keyframe auftritt, sowie einen Block mit den jeweiligen Style-Informationen für diesen Keyframe.</p>

<p>Die Reihenfolge der Keyframes ist egal, denn sie werden in der Reihenfolge ihrer Prozentzahl verwendet.</p>

<h3 id="Gültige_Keyframe-Liste">Gültige Keyframe-Liste</h3>

<p>Damit ein Keyframe gültig ist, muss er Regeln enthalten, die zumindest die Zeiten <code>0%</code> (oder <code>from</code>) und <code>100%</code> (oder <code>to</code>) enthalten (d.h. der Start- und Endstatus der Animation). Wenn beide Zeiten nicht angegeben sind, ist die Keyframe-Deklaration ungültig; sie wird vom Parser ignoriert und kann nicht als Animation verwendet werden.</p>

<p>Wenn Eigenschaften beschrieben werden, die nicht in den Keyframe-Regeln animiert werden können, werden sie ignoriert. Unterstützte Eingeschaften in dem Block werden weiterhin animiert.</p>

<h3 id="Doppelte_Deklarationen">Doppelte Deklarationen</h3>

<p>Wenn mehrere Keyframe-Sets mit einem Namen existieren, gilt der letzte definierte. <code>@keyframes</code>-Regeln sind nicht kaskadierend, Animationen nehmen also niemals Keyframes von mehr als einer definierten Regel.</p>

<p>Wenn ein Zeitpunkt in der Animation doppelt deklariert ist, gilt der letzte Keyframe dieses Zeitpunkts in der <code>@keyframes</code>-Regel. Mehrere Regeln derselben Zeit sind nicht kaskadierend.</p>

<h3 id="Wenn_Eigenschaften_aus_manchen_Keyframes_ausgelassen_werden">Wenn Eigenschaften aus manchen Keyframes ausgelassen werden</h3>

<p>Jede Eigenschaft, die nicht in jedem Keyframe spezifiert wird, ist interpoliert (mit der Ausnahme von denen, die nicht interpoliert werden können und daher aus der gesamten Animation weggelassen werden). Zum Beispiel:</p>

<pre class="brush: css">@keyframes identifier {
  0% { top: 0; left: 0; }
  30% { top: 50px; }
  68%, 72% { left: 50px; }
  100% { top: 100px; left: 100%; }
}
</pre>

<p>Hier wird die {{ cssxref("top") }}-Eigenschaft mit Benutzen der <code>0%</code>-, <code>30%-</code>, und <code>100%</code>-Keyframes animiert, und {{ cssxref("left") }} animiert anhand der <code>0%</code>-, <code>68%</code>-, and <code>100%</code>-Keyframes.</p>

<p>Nur Eigenschaften, die in sowohl im <code>0%</code>-, als auch im <code>100%</code>-Keyframe spezifiziert sind, werden animiert; jede Eigenschaft, die nicht in diesen beiden Keyframes enthalten ist, wird ihren Startwert für die Dauer der Animation behalten.</p>

<h3 id="Wenn_ein_Keyframe_mehrmals_definiert_wird">Wenn ein Keyframe mehrmals definiert wird</h3>

<p>Wenn ein Keyframe mehrmals definiert wird, aber nicht alle Eigenschaften in jedem Keyframe enthalten sind, werden ausschließlich die Werte des letzten Keyframes beachtet, zum Beispiel:</p>

<pre class="brush: css">@keyframes identifier {
  0% { top: 0; }
  50% { top: 30px; left: 20px; }
  50% { top: 10px; }
  100% { top: 0; }
}
</pre>

<p>In diesem Beispiel ist der genutzte Wert des <code>50%</code>-Keyframe <code>top: 10px</code> und alle anderen Werte des ersten Keyframes werden ignoriert.</p>

<p>{{ non-standard_inline }} {{ fx_minversion_inline("14") }}  Kaskadierende Keyframes werden in Firefox ab Version 14 unterstützt. Im oberen Beispiel wird beim <code>50%</code>-Keyframe der Wert <code>left: 20px</code> beachtet. Dies ist noch nicht in der Spezifikation definiert, wird allerdings gerade diskutiert.</p>

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

<pre class="syntaxbox">@keyframes &lt;bezeichner&gt; {
  [ [ from | to | &lt;Prozentzahl&gt; ] [, from | to | &lt;Prozentzahl&gt; ]* block ]*
}
</pre>

<h3 id="Values">Values</h3>

<dl>
 <dt><code>&lt;Bezeichner&gt;</code></dt>
 <dd>Ein Name, der die Keyframe-Liste eindeutig identifiziert. Er muss den CSS-Syntax-Richtlinien für Bezeichner entsprechen.</dd>
 <dt><code>from</code></dt>
 <dd>Der Startwert <code>0%</code>.</dd>
 <dt><code>to</code></dt>
 <dd>Der Endwert <code>100%</code>.</dd>
 <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
 <dd>Eine Prozentzahl, die den Zeitpunkt in der Animationssequenz angibt, an dem der spezifizierte Keyframe gelten soll.</dd>
</dl>

<h2 id="Beispiel">Beispiel</h2>

<p>Siehe <a href="/en/CSS/CSS_animations" title="en/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', '#keyframes', '@keyframes') }}</td>
   <td>{{ Spec2('CSS3 Animations') }}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

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

{{Compat("css.at-rules.keyframes")}}

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

<ul>
 <li><a href="/en-US/docs/CSS/Tutorials/Using_CSS_animations" title="Tutorial about CSS animations">CSS-Animationen benutzen</a></li>
 <li>{{ domxref("AnimationEvent", "AnimationEvent") }}</li>
</ul>