CSS-Animationen

CSS-Animationen bieten eine ausgereifte Möglichkeit, die Benutzererfahrung durch sanfte, visuell ansprechende Übergänge und Effekte zu verbessern. In diesem umfassenden Leitfaden gehen wir auf die Feinheiten von CSS-Animationen ein und liefern detaillierte Erklärungen, Beispiele und Best Practices für dynamische und responsive Designs.

Einführung in CSS-Animationen

CSS-Animationen ermöglichen es Webentwicklern, HTML-Elemente zu animieren, ohne auf JavaScript angewiesen zu sein. Sie werden mithilfe von Keyframes definiert, die die Styles an verschiedenen Punkten der Animationssequenz festlegen.

Grundlegendes Beispiel einer CSS-Animation

<div class="animated-box"></div>

<style>
  .animated-box {
    width: 100px;
    height: 100px;
    background-color: red;
    animation: move 4s infinite;
  }

  @keyframes move {
    0% { transform: translateX(0); }
    50% { transform: translateX(200px); }
    100% { transform: translateX(0); }
  }
</style>

Wichtige Eigenschaften von CSS-Animationen

• animation-name: Gibt den Namen der Keyframes an.
• animation-duration: Legt die Dauer der Animation fest.
• animation-timing-function: Bestimmt die Geschwindigkeitskurve der Animation.
• animation-delay: Verzögert den Start der Animation.
• animation-iteration-count: Legt fest, wie oft die Animation abgespielt werden soll.
• animation-direction: Gibt an, ob die Animation bei abwechselnden Durchläufen in umgekehrter Reihenfolge abgespielt werden soll.

Mehrere Animationen anwenden

Du kannst mehrere Animationen auf ein einzelnes Element anwenden, indem du sie durch Kommas trennst.

<div class="multi-animated-box"></div>

<style>
  .multi-animated-box {
    width: 100px;
    height: 100px;
    background-color: blue;
    animation: move 4s infinite, rotate 2s infinite;
  }

  @keyframes move {
    0% { transform: translateX(0); }
    50% { transform: translateX(200px); }
    100% { transform: translateX(0); }
  }

  @keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
</style>

Fortgeschrittene Techniken

Responsive Animationen

Stelle sicher, dass Animationen responsiv sind und sich an verschiedene Bildschirmgrößen anpassen.

<div class="responsive-box"></div>

<style>
  .responsive-box {
    width: 50vw;
    height: 50vw;
    background-color: green;
    animation: resize 4s infinite;
  }

  @keyframes resize {
    0% { width: 50vw; height: 50vw; }
    50% { width: 70vw; height: 70vw; }
    100% { width: 50vw; height: 50vw; }
  }
</style>

Transformationen kombinieren

Kombiniere mehrere Transformationseigenschaften, um komplexe Animationen zu erstellen.

<div class="complex-transform-box"></div>

<style>
  .complex-transform-box {
    width: 100px;
    height: 100px;
    background-color: yellow;
    animation: complexTransform 5s infinite;
  }

  @keyframes complexTransform {
    0% {
      transform: translateX(0) rotate(0deg) scale(1);
    }
    50% {
      transform: translateX(200px) rotate(180deg) scale(1.5);
    }
    100% {
      transform: translateX(0) rotate(360deg) scale(1);
    }
  }
</style>

Animation Fill Modes

Die Eigenschaft animation-fill-mode legt fest, wie eine CSS-Animation Styles auf ihr Ziel vor und nach der Ausführung anwendet.

<div class="fill-mode-box"></div>

<style>
  .fill-mode-box {
    width: 100px;
    height: 100px;
    background-color: purple;
    animation: fillMode 3s forwards;
  }

  @keyframes fillMode {
    0% { background-color: purple; }
    100% { background-color: orange; }
  }
</style>

Animationsverzögerungen und Timing-Funktionen

Verwende Animationsverzögerungen und Timing-Funktionen, um das Tempo und den Start von Animationen zu steuern.

<div class="timing-function-box"></div>

<style>
  .timing-function-box {
    width: 100px;
    height: 100px;
    background-color: pink;
    animation: timingFunction 4s ease-in-out infinite;
  }

  @keyframes timingFunction {
    0% { transform: translateY(0); }
    50% { transform: translateY(200px); }
    100% { transform: translateY(0); }
  }
</style>

Best Practices für CSS-Animationen

1. CPU-Auslastung minimieren: Halte Animationen einfach, um eine übermäßige CPU-Auslastung zu vermeiden, die die Performance beeinträchtigen kann – besonders auf mobilen Geräten.
2. Hardware-Beschleunigung nutzen: Verwende die Eigenschaften transform und opacity, um GPU-Beschleunigung zu nutzen.
3. Fallbacks: Stelle Fallback-Styles für Browser bereit, die keine Animationen unterstützen.
4. Performance-Tests: Teste Animationen auf verschiedenen Geräten und Browsern, um eine reibungslose Performance sicherzustellen.

Beispiel einer gut optimierten Animation

<div class="optimized-box"></div>

<style>
  .optimized-box {
    width: 100px;
    height: 100px;
    background-color: cyan;
    animation: optimizedMove 3s ease-in-out infinite;
  }

  @keyframes optimizedMove {
    0% { transform: translateY(0) scale(1); }
    50% { transform: translateY(200px) scale(1.2); }
    100% { transform: translateY(0) scale(1); }
  }
</style>

CSS-Animationen mit JavaScript steuern

CSS übernimmt das Rendering einer Animation effizient, weiß aber nicht wann eine Animation ausgeführt werden soll oder was danach passieren soll. Diese Entscheidungslogik gehört in JavaScript. Das häufigste Muster lautet: Animation in CSS definieren, dann mit JavaScript eine Klasse hinzufügen oder entfernen, um sie zu starten oder zu stoppen.

So bleibt die sanfte, GPU-beschleunigte Wiedergabe in CSS, während dein Code die Kontrolle über Timing und Folgeaktionen behält.

Starten und Stoppen durch Klassen-Umschalten

Platziere die Animation auf einer Klasse statt auf dem Basis-Selektor, und schalte diese Klasse dann um:

<button id="play">Play</button>
<div id="box"></div>

<style>
  #box {
    width: 100px;
    height: 100px;
    background: teal;
  }
  /* The animation only runs while this class is present */
  #box.run {
    animation: slide 1s ease-in-out;
  }
  @keyframes slide {
    from { transform: translateX(0); }
    to   { transform: translateX(200px); }
  }
</style>

<script>
  const box = document.getElementById('box');
  document.getElementById('play').onclick = () => {
    // Toggle: add the class to play, the CSS animation does the rest
    box.classList.add('run');
  };
</script>

Da die Animation auf der .run-Klasse liegt, stoppt das Entfernen der Klasse sie sofort, und das erneute Hinzufügen spielt sie von vorne ab.

Auf das Ende reagieren: transitionend und animationend

Der entscheidende Vorteil, Animationen von JavaScript aus zu steuern, besteht darin, dass der Browser DOM-Ereignisse auslöst, auf die du reagieren kannst. So lassen sich Schritte verketten, Klassen bereinigen oder Code genau dann ausführen, wenn ein Effekt abgeschlossen ist – ohne fehleranfälliges setTimeout-Raten.

• Bei CSS-Übergängen wird das transitionend-Ereignis ausgelöst, wenn ein Übergang abgeschlossen ist.
• Bei CSS-Animationen (@keyframes) werden drei Ereignisse ausgelöst: animationstart, animationiteration (einmal pro Schleife) und animationend.

<button id="fade">Fade out</button>
<div id="panel">Hello</div>

<style>
  #panel {
    width: 150px;
    padding: 20px;
    background: gold;
    transition: opacity 0.5s;
  }
  #panel.hidden { opacity: 0; }
</style>

<script>
  const panel = document.getElementById('panel');

  document.getElementById('fade').onclick = () => panel.classList.add('hidden');

  // Runs the moment the fade completes — not a guessed delay
  panel.addEventListener('transitionend', (event) => {
    console.log(`Transition of "${event.propertyName}" finished`);
    panel.style.display = 'none'; // safe to hide only now
  });
</script>

Wenn der Übergang endet, gibt die Konsole aus:

Transition of "opacity" finished

Ereignisdetails auslesen: propertyName und animationName

Animationsereignisse enthalten nützliche Daten. Wenn mehrere Eigenschaften oder Animationen beteiligt sind, muss man oft wissen, welche gerade abgeschlossen wurde.

• event.propertyName — die CSS-Eigenschaft, die übergegangen ist (bei transitionend).
• event.animationName — der @keyframes-Name (bei den drei Animationsereignissen).
• event.elapsedTime — die Laufzeit in Sekunden, ohne etwaige animation-delay.

<div id="bouncer">Watch the console</div>

<style>
  #bouncer { animation: bounce 0.6s ease 3; }
  @keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-30px); }
  }
</style>

<script>
  const el = document.getElementById('bouncer');

  el.addEventListener('animationstart', (e) =>
    console.log(`start: ${e.animationName}`));

  el.addEventListener('animationiteration', (e) =>
    console.log(`loop of ${e.animationName} at ${e.elapsedTime}s`));

  el.addEventListener('animationend', (e) =>
    console.log(`end: ${e.animationName} (total ${e.elapsedTime}s)`));
</script>

Bei animation: bounce 0.6s ease 3 (drei Iterationen) gibt die Konsole start, zwei animationiteration-Ereignisse (Beginn von Schleife 2 und 3) und dann end nach insgesamt 1.8s aus.

JS-gesteuert vs. CSS-gesteuert: Was wählen?

Die praktischste Lösung ist eine Kombination aus beidem: CSS beschreibt den Effekt, JavaScript entscheidet, wann er ausgeführt wird und was danach passiert – über die oben genannten Ereignisse. Wenn du wirklich Frame-genaue Kontrolle benötigst, greife auf JavaScript-Animationen mit requestAnimationFrame oder die Web Animations API zurück, um Animationen vollständig im Code zu erstellen und zu steuern.

Fazit

CSS-Animationen sind ein leistungsstarkes Werkzeug zur Erstellung dynamischer und ansprechender Web-Erlebnisse. Durch die Beherrschung von Keyframes, Animationseigenschaften und fortgeschrittenen Techniken können Entwickler professionelle Animationen erstellen, die die Benutzerinteraktion verbessern. Experimentiere mit verschiedenen Animationen, teste gründlich und halte dich an Best Practices, um die besten Ergebnisse zu erzielen.

Übungen