path: root/files/de/web/css/css_animations/using_css_animations/index.html

---
title: CSS Animationen nutzen
slug: Web/CSS/CSS_Animations/CSS_Animationen_nutzen
translation_of: Web/CSS/CSS_Animations/Using_CSS_animations
---
<p>{{SeeCompatTable}}{{CSSRef}}</p>

<p><span class="seoSummary"><strong>CSS Animationen</strong> ermöglichen animierte Übergänge von einem CSS Style-Konfiguration zur nächsten. Die Animationen bestehen aus zwei Komponenten: Einem Style, der die Animation beschreibt, sowie einer Menge von Keyframes, die Start, Ende und mögliche Zwischenpositionen der Animation festlegt.</span></p>

<p>Es gibt drei zentrale Vorteile von CSS-Animationen gegenüber traditionellen skriptgetriebenen Animationstechniken:</p>

<ol>
 <li>Sie sind einfach zu nutzen für simple Animationen; man kann sie ohne Javascript-Kenntnisse erstellen. </li>
 <li>Die Animationen laufen performant, sogar unter mäßiger Systemauslastung. Im Gegensatz dazu fallen selbst simple Javascript-Animationen durch schlechte Performance auf. Die Engine kann einzelne Frames überspringen und kennt weitere Techniken, um die Ausführung so sauber wie möglich zu gestalten. </li>
 <li>Da der Browser die Animation kontrolliert, kann er selbstständig die Performance optimieren, zum Beispiel durch das Drosseln der Freqenz von Animationen in aktuell nicht sichtbaren Browser-Tabs.</li>
</ol>

<h2 id="Konfigurieren_der_Animation">Konfigurieren der Animation</h2>

<p>Um eine CSS-Animation zu erstellen, fügt man dem zu animierenden Element die {{ cssxref("animation") }}-Eigenschaft oder seine Sub-Eigenschaften zu. So lassen sich Timing und Dauer der Animation sowie weitere Details des Animationsablaufes bestimmen. Man legt damit <strong>nicht </strong>die eigentliche Darstellung der Animation fest, die mittels {{ cssxref("@keyframes") }} definiert wird. Siehe {{ anch("Definieren der Animationssequenz mittels Keyframes") }} weiter unten.</p>

<p>Die Sub-Eigenschaften der {{ cssxref("animation") }}-Eigenschaft sind:</p>

<dl>
 <dt>{{ cssxref("animation-name") }}</dt>
 <dd>Spezifiziert den Namen der {{ cssxref("@keyframes") }}-at-Regel, welche die einzelnen Keyframes beschreibt.</dd>
 <dt>{{ cssxref("animation-duration") }}</dt>
 <dd>Legt die Dauer der Animation für einen kompletten Durchgang fest.</dd>
 <dt>{{ cssxref("animation-timing-function") }}</dt>
 <dd>Konfiguriert das Timing der Animation. Konkret werden die Übergänge zwischen den einzelnen Keyframes mittels Beschleunigungskurven festgelegt.</dd>
 <dt>{{ cssxref("animation-delay") }}</dt>
 <dd>Setzt den Abstand zwischen dem Zeitpunkt, an dem die Animation vollständig geladen ist und dem Start der Animationssequenz.</dd>
 <dt>{{ cssxref("animation-iteration-count") }}</dt>
 <dd>Konfiguriert wie oft die Animation wiederholt wird; mittels <code>infinite</code> wird die Animation unendlich wiederholt.</dd>
 <dt>{{ cssxref("animation-direction") }}</dt>
 <dd>Legt fest, ob die Animation nach jedem Durchgang die Abspielrichtung wechselt oder zum Startpunkt zurückspringt und sich wiederholt. </dd>
 <dt>{{ cssxref("animation-fill-mode") }}</dt>
 <dd>Legt fest, welche Styles vor und nach dem Ausführen der Animation auf das animierte Element angewendet werden.</dd>
 <dt>{{ cssxref("animation-play-state") }}</dt>
 <dd>Ermöglicht das Pausieren und Wiederaufnehmen einer Animationssequenz.</dd>
 <dt>
 <h2 id="Definieren_der_Animationssequenz_mittels_Keyframes">Definieren der Animationssequenz mittels Keyframes</h2>
 </dt>
</dl>

<p>Nachdem Sie den zeitlichen Ablauf der Animation festgelegt haben, müssen Sie die Erscheinung der Animation festlegen. Sie erreichen dies, indem Sie zwei oder mehr Keyframes mit Hilfe der {{ cssxref("@keyframes") }} at-Regel erstellen. Jeder Keyframe beschreibt den Darstellungszustand des animierten Elements zum gegebenen Zeitpunkt der Animationssequenz.</p>

<p>Da der zeitliche Ablauf der Animation im CSS-Style, welcher die Animation konfiguriert, festgelegt ist, verwenden Keyframes {{ cssxref("percentage") }} um den Zeitpunkt festzulegen, wann die Animationssequenz beginnen soll. 0% steht für den ersten Moment der Animationssequenz, wohingegen 100%  den letzten Zustand der Animation beschreibt. Weil diese beiden Keyframes so wichtg sind gibt es zwei Wörter für sie: <code>from</code> und <code>to</code>. Sie sind beide optional. Falls <code>from/0%</code> oder <code>to/100%</code> nicht definiert sind , startet oder stoppt der Browser die Animation gemäß der berechneten Werte aller Attribute.</p>

<p>Sie können optional zusätzliche Keyframes einfügen, die jeweils Zwischenschritte auf dem Weg vom Start- zum Endpunkt der Animation beschreiben.</p>

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

<div class="note"><strong>Hinweis:</strong> Einige ältere Browser (vor 2017) benötigen unter Umständen Präfixe; die Live-Beispiele, welche durch einen Klick im Browser betrachtet werden können, beinhalten die <code>-webkit</code> Präfix-Syntax.</div>

<h3 id="Einen_Text_übers_Fenster_gleiten_lassen.">Einen Text übers Fenster gleiten lassen.</h3>

<p>Dieses einfache Beispiel an einem {{ HTMLElement("p") }}-Element lässt einen Text von rechts über das Browserfenster gleiten.</p>

<p>Beachte, dass solche Animationen dafür sorgen können, dass die Seite breiter als das Browser-Fenster wird. Um dieses Problem zu umgehen, wird das zu animierende Element in einen Container gepackt. Der Container erhält anschließend die {{cssxref("overflow")}}<code>:hidden</code> Eigenschaft.</p>

<pre class="brush: css">p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}
</pre>

<p>In diesem Beispiel, bestimmt der Style für das {{ HTMLElement("p") }}-Element, dass durch den Einsatz von {{ cssxref("animation-duration") }} die Animation von Anfang bis Ende in drei Sekunden ausgeführt werden soll. Der Name der {{ cssxref("@keyframes") }} at-Regel, welche die Keyframes der Animation beschreibt, lautet "slidein".</p>

<p>Falls Sie weitere angepasste Styles auf das {{ HTMLElement("p") }}-Element anwenden wollen, die keine CSS-Animationen unterstützen, würden diese hier ebenfalls eingefügt werden. In diesem Falle wollen wir aber außer der Animation keine weiteren Styles festlegen.</p>

<p>Die Keyframes werden anhand der {{ cssxref("@keyframes") }} at-Regel festgelegt. In diesem Beispiel haben wir nur zwei Keyframes. Der erste tritt bei 0% (aufgrund des Aliases <code>from</code>) ein. Hier bestimmen wir einen linken Außenabstand des Elements von 100% (das heißt, am rechten äußeren Rand des umschließenden Elements). Darüberhinaus wird die Breite des Elements auf 300% gesetzt (oder drei Mal der Breite des umgebenden Elements). Dadurch wird der Header im ersten Frame der Animation außerhalb des rechten Randes des Browser-Fensters gezeichnet.</p>

<p>Der zweite (und letzte) Keyframe tritt bei 100% ein (aufgrund des Aliases <code>to</code>). Der linke Außenabstand wird auf 0% gesetzt und die Breite des Elements auf 100% aktualisiert. Dadurch beendet der Header seine Animation mit einer Ausrichtung am linken Rand des Inhaltsbereichs.</p>

<pre class="brush: html">&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
at last the Caterpillar took the hookah out of its mouth, and addressed
her in a languid, sleepy voice.&lt;/p&gt;
</pre>

<div class="blockIndicator note">
<p><strong>Hinweis</strong>: Laden Sie die Seite neu, um die Animation zu sehen. Oder klicken Sie auf den CodePen-Knopf, um die Animation innerhalb der CodePen-Umgebung zu betrachten.</p>
</div>

<p>{{EmbedLiveSample("Making_text_slide_across_the_browser_window","100%","250")}}</p>

<h3 id="Hinzufügen_eines_weiteren_Keyframes">Hinzufügen eines weiteren Keyframes</h3>

<p>Lassen Sie uns eine weitere Keyframe zur Animation des vorigen Beispiels hinzufügen. Sagen wir, wir wollen zunächst für eine Weile die Schriftgröße des Headers erhöhen, während er sich von rechts nach links bewegt. Am Ende soll sie wieder auf ihre ursprüngliche Größe schrumpfen. Das ist so einfach wie das Hinzufügen dieser Keyframe:</p>

<pre class="brush: css">75% {
  font-size: 300%;
  margin-left: 25%;
  width: 150%;
}
</pre>

<p>Der vollständige Code sieht nun so aus:</p>

<pre class="brush: css">p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  75% {
    font-size: 300%;
    margin-left: 25%;
    width: 150%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}</pre>

<pre class="brush: html">&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
at last the Caterpillar took the hookah out of its mouth, and addressed
her in a languid, sleepy voice.&lt;/p&gt;</pre>

<p>Dies teilt dem Browser mit, dass nach 75% der Animationssequenz der linke Außenabstand des Headers bei 25% und die Breite bei 150% liegen sollte.</p>

<div class="blockIndicator note">
<p><strong>Hinweis</strong>: Laden Sie die Seite neu, um die Animation zu sehen. Oder klicken Sie auf den CodePen-Knopf, um die Animation innerhalb der CodePen-Umgebung zu betrachten.</p>
</div>

<p>{{EmbedLiveSample("Adding_another_keyframe","100%","250")}}</p>

<h3 id="Lass_es_sich_wiederholen">Lass es sich wiederholen</h3>

<p>Damit die Animation sich wiederholt, nutzen Sie die {{ cssxref("animation-iteration-count") }}-Eigenschaft, um festzulegen, wie oft sich die Animation wiederholen soll. In diesem Beispiel setzen wir sie auf <code>infinite</code>, damit sich die Animation unendlich oft wiederholt:</p>

<pre class="brush: css">p {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
}
</pre>

<p>Nach Hinzufügen zum bisherigen Code:</p>

<pre class="brush: css">@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}</pre>

<pre class="brush: html">&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
at last the Caterpillar took the hookah out of its mouth, and addressed
her in a languid, sleepy voice.&lt;/p&gt;</pre>

<p>{{EmbedLiveSample("Making_it_repeat","100%","250")}}</p>

<h3 id="Lassen_Sie_es_sich_vor-_und_zurück_bewegen">Lassen Sie es sich vor- und zurück bewegen</h3>

<p>Die vorige Anpassung sorgte dafür, dass sich die Animation wiederholte. Aber es ist sehr eigenartig, dass die Animation jedes Mal zum Anfang zurückspringt, wenn sie sich wiederholt. Was wir wirklich wollen ist ein Vor- und Zurückbewegen über den Bildschirm. Dazu muss die {{ cssxref("animation-direction") }}-Eigenschaft auf <code>alternate</code> gesetzt werden:</p>

<pre class="brush: css">p {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
</pre>

<p>Damit sieht der übrige Code folgendermaßen aus:</p>

<pre class="brush: css">@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}</pre>

<pre class="brush: html">&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
at last the Caterpillar took the hookah out of its mouth, and addressed
her in a languid, sleepy voice.&lt;/p&gt;</pre>

<p>{{EmbedLiveSample("Making_it_move_back_and_forth","100%","250")}}</p>

<h3 id="Benutzen_der_Animation_Kurzversion">Benutzen der Animation Kurzversion</h3>

<p>Die {{cssxref("animation")}}-Kurzversion ist hilfreich, um Platz zu sparen. Zum Beispiel haben wir diese Regel während dieses Artikels genutzt:</p>

<pre class="brush: css">p {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
</pre>

<p>Sie könnte durch Folgendes ersetzt werden:</p>

<pre class="brush: css">p {
  animation: 3s infinite alternate slidein;
}
</pre>

<div class="note">
<p><strong>Hinweis</strong>: Sie können weitere Beispiele auf der Referenzseite von {{cssxref("animation")}} finden.</p>
</div>

<h3 id="Setzen_mehrere_Animationseigenschaftswerte">Setzen mehrere Animationseigenschaftswerte</h3>

<p>Die Langversion der CSS-Animation akzeptiert mehrere durch Komma getrennte Werte — eine Eigenschaft, die genutzt werden kann, um mehrere Animationen in einer einzigen Regel anzuwenden. Daneben lassen sich für die verschiedenen Animationen die Dauer, Anzahl der Wiederholungen usw. einzeln festlegen. Sehen Sie sich die folgenden kurzen Beispiele an, die die verschiedenen Kombinationen erklären:</p>

<p>In diesem ersten Beispiel wurden drei Animations-Namen gesetzt, aber nur eine Dauer und Anzahl der Wiederholungen gesetzt. In diesem Falle erhalten alle drei Animationen die gleiche Dauer und Anzahl der Wiederholungen:</p>

<pre class="brush: css">animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 3s;
animation-iteration-count: 1;</pre>

<p>In diesem zweiten Beispiel wurden drei Werte für drei Eigenschaften gesetzt. In diesem Falle entsprechen die Werte an der selben Position jeder Eigenschaft der jeweiligen Animation. So hat die <code>fadeInOut</code> Animation beispielsweise eine Dauer von 2.5s und wiederholt sich zwei Mal usw.</p>

<pre class="brush: css">animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;</pre>

<p>In diesem dritten Beispiel wurden drei Animationen festgelegt, aber nur zwei Dauern und Anzahl der Wiederholungen. In Fällen wie diesen, in denen es nicht genug Werte gibt, um jeder Animation ihren eigenen Wert zuzuweisen, wiederholt sich der Wertze-Zyklus von Anfang bis Ende. Beispielsweise erhält fadeInOut eine Dauer von 2.5s und moveLeft300px eine von 5s. Damit sind wir am Ende der verfügbaren Werte für die Dauer angelangt, also fangen wir von vorne an — bounce bekommt daher eine dauer von 2.5s zugewiesen. Die Anzahl der Wiederholungen (und alle weiteren Eigenschaften, die Sie so festlegen), werden auf die selbe Weise zugewiesen.</p>

<pre class="brush: css">animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s;
animation-iteration-count: 2, 1;</pre>

<h3 id="Benutzen_von_Animations-Ereignissen">Benutzen von Animations-Ereignissen</h3>

<p>Sie können zusätzliche Kontrolle über Animationen — sowie mehr nützliche Informationen — erhalten, indem sie Animations-Ereignisse nutzen. Diese Ereignisse werden durch das {{domxref("AnimationEvent")}}-Objekt repräsentiert. Es kann genutzt werden, um den Start, das Ende oder den Beginn einer Wiederholung zu erkennen. Jedes Ereignis beinhaltet die Zeit, an der es auftrat sowie den Namen der Animation, welche es getriggert hat.</p>

<p>Wir passen das Beispiel mit dem gleitenden Text an, um einige Informationen über jedes Animations-Ereignis bei Eintritt auszugeben, um zu sehen, wie sie funktionieren.</p>

<h4 id="Hinzufügen_des_CSS">Hinzufügen des CSS</h4>

<p>Wir beginnen mit dem Schreiben des CSS für die Animation. Diese Animation wird drei Sekunden dauern, “slidein” genannt werden, sich drei Mal wiederholen, und dabei jedes Mal die Richtung ändern. In den {{cssxref("@keyframes")}} wird die Breite under linke Außenabstand manipuliert, um das Element über den Bildschirm gleiten zu lassen.</p>

<pre class="brush: css">.slidein {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: 3;
  animation-direction: alternate;
}

@keyframes slidein {
  from {
    margin-left:100%;
    width:300%
  }

  to {
    margin-left:0%;
    width:100%;
  }
}</pre>

<h4 id="Hinzufügen_der_Animations-Ereignis-Listener">Hinzufügen der Animations-Ereignis-Listener</h4>

<p>Wir verwenden JavaScript-Code, um auf alle drei möglichen Animationsereignisse zu aluschen. Der folgende Code konfiguriert unsere Event Listener. Wir rufen ihn auf, wenn das Dokument das erste Mal geladen wurde, um die Dinge einzurichten.</p>

<pre class="brush: js">var element = document.getElementById("watchme");
element.addEventListener("animationstart", listener, false);
element.addEventListener("animationend", listener, false);
element.addEventListener("animationiteration", listener, false);

element.className = "slidein";
</pre>

<p>Dies ist ziemlich üblicher Code; Sie können mehr über die Details der Funktionsweise in der Dokumentation zu {{domxref("eventTarget.addEventListener()")}} erfahren. Als letztes setzt dieser Code die <code>class</code> des Elements, welches wir animieren wollen, auf “slidein”, um die Animation damit zu starten.</p>

<p>Warum? Weil das <code>animationstart</code> Ereignis mit dem Beginn der Animation gestartet wird. In unserem Falle vor Ausführung des Codes. Daher starten wir die Animation selber durch das Setzen von class auf dem Element zu dem Werte, welches die Animation steuert.</p>

<h4 id="Empfangen_von_Ereignissen">Empfangen von Ereignissen</h4>

<p>Die Ereignisse werden an die untenstehende <code>listener()</code> Funktion durchgereicht.</p>

<pre class="brush: js">function listener(event) {
  var l = document.createElement("li");
  switch(event.type) {
    case "animationstart":
      l.innerHTML = "Started: elapsed time is " + event.elapsedTime;
      break;
    case "animationend":
      l.innerHTML = "Ended: elapsed time is " + event.elapsedTime;
      break;
    case "animationiteration":
      l.innerHTML = "New loop started at time " + event.elapsedTime;
      break;
  }
  document.getElementById("output").appendChild(l);
}
</pre>

<p>Auch dieser Code ist sehr einfach. Es schaut auf den {{domxref("event.type")}}, um zu bestimmen, welche Art von Animation eingetreten ist. Danach fügt es die entsprechende Notiz zur {{HTMLElement("ul")}} (ungeordneten Liste) hinzu, welche wir benutzen, um die Ereignisse mitzuschneiden.</p>

<p>Schlussendlich sieht die Ausgabe in etwa folgendermaßen aus:</p>

<ul>
 <li>Started: elapsed time is 0</li>
 <li>New loop started at time 3.01200008392334</li>
 <li>New loop started at time 6.00600004196167</li>
 <li>Ended: elapsed time is 9.234000205993652</li>
</ul>

<p>Beachten Sie, dass die Zeiten ziemlich nah, aber nicht exakt denen entsprechen, die wir in der Animation konfiguriert haben. Beachten Sie außerdem, dass bei der letzten Animation, das <code>animationiteration</code> Ereignis nicht gesetzt wurde. Stattdessen wurde ein <code>animationend</code> Ereignis gesendet.</p>

<h4 id="Das_HTML">Das HTML</h4>

<p>Der Vollständigkeit halber ist hier das HTML, welches den Seiteninhalt darstellt und die Liste beinhaltet, welche vom Skript mit Informationen über empfangene Ereignisse gefüllt wird:</p>

<pre class="brush: html">&lt;h1 id="watchme"&gt;Watch me move&lt;/h1&gt;
&lt;p&gt;
  This example shows how to use CSS animations to make &lt;code&gt;H1&lt;/code&gt;
  elements move across the page.
&lt;/p&gt;
&lt;p&gt;
  In addition, we output some text each time an animation event fires,
  so you can see them in action.
&lt;/p&gt;
&lt;ul id="output"&gt;
&lt;/ul&gt;
</pre>

<p>Hier gibt es eine Live-Ausgabe:</p>

<div class="blockIndicator note">
<p><strong>Hinweis</strong>: Laden Sie die Seite neu, um die Animation zu sehen. Oder klicken Sie auf den CodePen-Knopf, um die Animation innerhalb der CodePen-Umgebung zu betrachten.</p>
</div>

<p>{{EmbedLiveSample('Using_animation_events', '600', '300')}}</p>

<h2 id="Zum_Weiterlesen">Zum Weiterlesen</h2>

<ul>
 <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li>
 <li><a href="https://wiki.developer.mozilla.org/en-US/docs/CSS/CSS_animations/Detecting_CSS_animation_support" title="en/CSS/CSS animations/Detecting CSS animation support">Detecting CSS animation support</a></li>
 <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">Using CSS transitions</a></li>
</ul>