T
css animations scroll-driven keyframes web-design

Moderne CSS-Animationen: Scroll-Driven, Spring und mehr

Bringen Sie Ihre Web-Animationen auf das nächste Level. Lernen Sie CSS Scroll-Driven Animations, Federphysik und fortgeschrittene Timing-Funktionen kennen.

2026-04-18

Moderne CSS-Animationen: Scroll-Driven, Spring und mehr

Animationen sind nicht mehr nur eine „nette Beigabe“. Sie sind wesentliche Werkzeuge, um Feedback zu geben, die Aufmerksamkeit des Benutzers zu lenken und ein unvergessliches Markenerlebnis zu schaffen.

Modernes CSS hat revolutionäre Wege eingeführt, um Elemente zu animieren, für die früher komplexe JavaScript-Scroll-Listener oder schwere Animationsbibliotheken erforderlich waren.

1. Scroll-Driven Animations: Kein JS erforderlich

Die spannendste Neuerung bei den CSS-Animationen ist die Spezifikation für Scroll-Driven Animations. Sie ermöglicht es Ihnen, den Fortschritt einer Animation direkt mit der Scrollposition eines Containers zu verknüpfen.

So funktioniert es:

Früher benötigten Sie window.onscroll und requestAnimationFrame. Jetzt brauchen Sie nur noch scroll-timeline.

@keyframes progress-bar {
  from { width: 0%; }
  to { width: 100%; }
}

.progress-indicator {
  animation: progress-bar linear;
  animation-timeline: scroll(); /* Mit dem Seitenscrollen verknüpfen! */
}

Wichtige Anwendungsfälle:

  • Lese-Fortschrittsbalken: Zeigt an, wie weit der Benutzer gescrollt hat.
  • Parallax-Effekte: Hintergrundelemente bewegen sich mit unterschiedlichen Geschwindigkeiten relativ zum Scrollen.
  • Reveal on Scroll: Elemente werden eingeblendet, sobald sie in den Viewport gelangen, unter Verwendung von view-timeline.

2. Fortgeschrittene Keyframes und Composition

Modernes CSS ermöglicht eine feiner abgestimmte Kontrolle darüber, wie Animationen kombiniert werden.

  • animation-composition: Definiert, wie mehrere Animationen, die dieselbe Eigenschaft betreffen, gemischt werden sollen (z. B. replace, add oder accumulate).
  • animation-range: Legt genau fest, wann eine Scroll-Driven Animation innerhalb des Viewports beginnt und endet.
.card {
  animation: fade-in linear;
  animation-timeline: view();
  /* Nur animieren, während sich das Element in den mittleren 50 % des Bildschirms befindet */
  animation-range: entry 25% exit 75%;
}

3. Über linear hinaus: Cubic-Bezier und Federphysik

Timing-Funktionen definieren das „Gefühl“ einer Animation. Während ease-in-out Standard ist, nutzen fortgeschrittene Designs benutzerdefinierte Kurven.

Cubic-Bezier

Eine Cubic-Bezier-Funktion ermöglicht es Ihnen, „Overshoot“- oder „Anticipation“-Effekte zu erstellen.

.button:active {
  /* Ein leichter Bounce-Effekt */
  transition: transform 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}

CSS Spring Animations (Experimentell)

Obwohl noch nicht vollständig nativ in allen Browsern, kommt das Konzept der Federphysik (Spring Physics) (Masse, Steifigkeit, Dämpfung) zu CSS. Dies erzeugt viel natürlichere, organischere Bewegungen als herkömmliches dauerbasiertes Timing.

4. Performance: Die 60FPS-Regel

Der Schlüssel zu flüssigen Animationen ist es, den „Main Thread“ zu meiden. Moderne CSS-Animationen sind hochoptimiert, aber nur, wenn Sie die richtigen Eigenschaften animieren.

Sicher zu animieren:

  • transform (scale, rotate, translate)
  • opacity
  • filter (in einigen Browsern)

Vermeiden Sie das Animieren von (verursacht Layout Shifts):

  • width / height
  • margin / padding
  • top / left / bottom / right

5. View Transitions: DOM-Änderungen animieren

In Kombination mit der View Transition API kann CSS nun das „Morphing“ von Elementen zwischen zwei Zuständen übernehmen und so ein nahtloses App-ähnliches Erlebnis schaffen.

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.5s;
}

FAQ: Häufig gestellte Fragen

F: Werden Scroll-Driven Animations bereits unterstützt?

A: Seit 2024 werden sie in Chrome und Edge unterstützt. Firefox und Safari arbeiten an der Implementierung. Sie können sie heute als „Progressive Enhancement“ nutzen – die Seite funktioniert auch ohne sie, sieht aber mit ihnen besser aus.

F: Warum ruckelt meine Animation?

A: Stellen Sie sicher, dass Sie nur transform und opacity animieren. Prüfen Sie, ob zu viele backdrop-filter-Effekte aktiv sind, da diese rechenintensiv sein können.

F: Kann ich @scroll-timeline verwenden?

A: Die ältere @scroll-timeline-Syntax wurde durch die prägnanteren Funktionen animation-timeline: scroll() und view() ersetzt. Wir empfehlen die Verwendung der neueren Syntax für Zukunftssicherheit.

Hauch Sie Ihrer Website Leben ein

Animationen sind die „Seele“ eines modernen User Interface. Durch das Meistern von Scroll-Driven Timelines und fortgeschrittenen Timing-Funktionen können Sie professionelle, ansprechende Erlebnisse schaffen, die Benutzer begeistern.

Bereit, Ihr Timing zu perfektionieren? Nutzen Sie unseren Cubic-Bezier Generator (demnächst verfügbar) oder unsere bestehenden Animations-Tools.

Zurück zum Blog