Animations mit Keyframes: Eigene Website mit HTML, CSS, JavaScript und Co

08.09.2025

Einführung in Animationen mit Keyframes

Animations sind ein wesentlicher Bestandteil moderner Webentwicklung. Sie verbessern nicht nur die Ästhetik einer Website, sondern können auch die Benutzererfahrung erheblich steigern. Mit Keyframes kannst du präzise steuern, wie sich Elemente über die Zeit verändern. In diesem Artikel erfährst du, wie du mit HTML, CSS und JavaScript ansprechende Animationen für deine eigene Website erstellst.

Was sind Keyframes?

Keyframes sind spezifizierte Punkte in einer Animation, die den Zustand eines animierten Elements definieren. In CSS werden Keyframes genutzt, um den Anfangs- und Endzustand sowie mögliche Zwischenzustände einer Animation festzulegen. Dies ermöglicht es, komplexe Bewegungen und Effekte zu erzeugen, die mit einfachen CSS-Transitions nicht möglich wären.

Erstellen von Keyframe-Animationen in CSS

Um eine Keyframe-Animation zu erstellen, definierst du zunächst einen @keyframes-Block. Innerhalb dieses Blocks gibst du verschiedene Zustände des Elements zu bestimmten Zeitpunkten an. Hier ein Beispiel:

@keyframes slideIn {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

In diesem Beispiel bewegt sich das Element von ausserhalb des Bildschirms auf seine ursprüngliche Position, während es gleichzeitig von unsichtbar zu sichtbar wechselt.

Verwendung von Keyframe-Animationen

Um eine Keyframe-Animation anzuwenden, verwendest du die CSS-Eigenschaft animation. Du kannst die Dauer, Verzögerung, Anzahl der Wiederholungen und viele andere Parameter festlegen:

.element {
  animation: slideIn 2s ease-out forwards;
}

Dieses Beispiel zeigt eine zweisekündige ease-out-Animation, die einmal ausgeführt wird und dann im Endzustand verbleibt.

Erweiterte Animationstechniken

Für fortgeschrittene Animationen kannst du JavaScript verwenden, um Animationen zu starten oder zu stoppen, basierend auf Benutzerinteraktionen oder anderen Ereignissen. Eine gängige Praxis ist es, Klassen hinzuzufügen oder zu entfernen, die CSS-Animationen triggern:

document.querySelector('.button').addEventListener('click', function() {
  document.querySelector('.element').classList.toggle('animate');
});

Diese Methode erlaubt es dir, Animationen dynamisch zu steuern und bietet somit eine flexible Möglichkeit, auf Benutzerverhalten zu reagieren.

Fazit

Das Erstellen von Animationen mit Keyframes eröffnet eine Welt voller kreativer Möglichkeiten. Ob du einfache Bewegungen oder komplexe Sequenzen erstellen möchtest, Keyframes bieten dir die Werkzeuge, um deine Vision zum Leben zu erwecken. Mit ein wenig Übung und Kreativität kannst du deine Website in ein interaktives und visuell ansprechendes Erlebnis verwandeln.