CSS oder JavaScript. Was wirklich flüssig läuft.

Ladezeiten und Frames entscheiden darüber, ob Besucher auf einer Website bleiben oder genervt abbrechen. Eine Bewegung im Webbrowser muss technisch sauber umgesetzt sein. Hier erfahren Sie, wann reine CSS-Eigenschaften die beste Wahl sind und wo JavaScript-Steuerung unverzichtbar wird.

Der direkte Vergleich im Browser-Engine-Test.

Nicht jede Animation gehört in eine JavaScript-Bibliothek. Modernes CSS übernimmt heutzutage den Großteil aller visuellen Interaktionen direkt im Rendering-Prozess des Browsers.

CSS-Animationen und Transitions

Schlank, schnell und direkt auf der GPU

CSS-Transitions und @keyframes werden vom Browser hochgradig optimiert. Wenn nur Eigenschaften wie Position, Skalierung oder Transparenz verändert werden, wird die Berechnung an die Grafikkarte (GPU) ausgelagert (Compositing Layer). Der Haupt-Thread (Main-Thread) von JavaScript bleibt komplett frei.

/* Hardwarebeschleunigte CSS-Animation */
.card-element {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  will-change: transform, opacity;
}

.card-element:hover {
  transform: translateY(-4px) scale(1.02);
  opacity: 0.95;
}

Ideal für: Hover-Effekte, Buttons, simple Tooltips, Modals und Flyouts, Spinner und konstante Hintergrund-Schleifen.

JavaScript-gesteuerte Animationen

Volle Kontrolle für komplexe Abläufe

Sobald Bewegungen voneinander abhängen, physikalische Trägheit (Physics) simulieren oder direkt an komplexe Scroll-Events gekoppelt sind, stößt CSS an seine Grenzen. JavaScript, per requestAnimationFrame oder über Bibliotheken wie GSAP, erlaubt dynamische Berechnungen und präzise Zeitachsen.

// Ruckelfreies Event-Handling via requestAnimationFrame
let ticking = false;

window.addEventListener('scroll', () => {
  if (!ticking) {
    window.requestAnimationFrame(() => {
      updateParallaxPosition(window.scrollY);
      ticking = false;
    });
    ticking = true;
  }
});

Ideal für: Interaktive Timeline-Sequenzen, komplexe Scroll-Animationsketten, Canvas- und WebGL-Visualisierungen und richtungsabhängiges Drag-and-Drop.

Wann welche Technologie zum Einsatz kommt.

Die Entscheidung fällt nicht am Geschmack, sondern an der Aufgabe. Für Oberflächen reicht CSS fast immer, für Logik und Abhängigkeiten braucht es JavaScript.

01 / CSS first

Der Standard für Benutzeroberflächen

Für den Großteil aller Interaktionen auf einer modernen Website ist CSS die naheliegende Wahl. Es erfordert kein Herunterladen externer Bibliotheken und läuft batterieschonend auf Mobilgeräten.

Hover- und Focus-Zustände bei Buttons
Einblenden von Dropdown-Menüs
Einfache Status-Ladeindikatoren
Sanfte Farb- und Schattenübergänge

02 / JavaScript specials

Wenn Dynamik und Logik erforderlich sind

Wenn die Animation vom Zustand der Anwendung oder komplexer Nutzer-Eingabe abhängt, übernimmt JavaScript die Regie. Auch hier gilt: Das Auslesen und Schreiben von DOM-Eigenschaften sollte sauber getrennt bleiben, um Layout-Thrashing zu vermeiden.

Scroll-Triggered Storytelling (Parallax)
Partikel-Effekte und Canvas-2D/3D
Choreografierte Kettenreaktionen mehrerer Elemente
Physikbasierte Trajektorien (Spring Physics)

Die goldenen Regeln für ruckelfreie 60 FPS.

Ob eine Animation flüssig läuft, entscheidet sich an drei Stellen: an den animierten Eigenschaften, an der Rücksicht auf die Nutzereinstellungen und am Zustand des Main-Threads.

Regel 01

Nur layoutfreie Properties nutzen

Eigenschaften wie width, height, top oder margin sollten nicht animiert werden. Diese erzwingen bei jedem Frame ein Reflow (Layout) und Repaint des Browsers. Sinnvoll sind stattdessen ausschließlich transform und opacity.

Regel 02

Prefers-reduced-motion beachten

Menschen mit vestibulären Störungen können durch plötzliche oder große Bewegungen auf dem Bildschirm Orientierungslosigkeit oder Übelkeit erleiden. Eine barrierefreie Website muss diese Vorliebe respektieren:

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Regel 03

Main-Thread-Blocking verhindern

Schlecht geschriebener JavaScript-Code blockiert die Ausführung von Layout-Berechnungen. Werden Animationen mit JS gesteuert, sind requestAnimationFrame oder die native Web Animations API (WAAPI) Pflicht.

Woran sich echte Performance erkennen lässt.

Ob eine Animation tatsächlich flüssig läuft, lässt sich nicht am subjektiven Eindruck festmachen. Die Browser-Entwicklertools liefern dafür konkrete Messwerte.

Frame-Budget

16,7 Millisekunden pro Frame

Für flüssige 60 FPS bleiben pro Bild rund 16,7 ms Rechenzeit, abzüglich Browser-Overhead realistisch eher 10 ms. Im Performance-Tab der DevTools zeigt sich das als durchgehend grüner Balken ohne rote Ausreißer ("Long Tasks").

Chrome DevTools, Reiter Performance, Aufnahme während der Animation
Rote Markierungen kennzeichnen Frames über dem Budget
Layout Shift und Paint-Bereiche sind separat einsehbar

Grenzfälle

Wenn CSS und JavaScript kombiniert werden

In der Praxis schließen sich beide Technologien selten aus. Häufig übernimmt JavaScript nur das Starten und Stoppen eines Zustands, während die eigentliche Bewegung per CSS-Klasse läuft.

Intersection Observer triggert eine CSS-Klasse beim Scrollen ins Sichtfeld
Web Animations API (WAAPI) kombiniert JS-Kontrolle mit GPU-Beschleunigung
State-Management, etwa in React oder Vue, steuert nur An und Aus, nicht den Bewegungsablauf selbst

Animationen technisch sauber umsetzen lassen.

Wer eine bestehende Website auf CSS- und JavaScript-Performance prüfen oder Animationen neu und sauber aufsetzen lassen möchte, kann sich melden. Auf Wunsch entsteht vorab ein funktionierender Entwurf zum Ansehen und Testen, auf eigenes Risiko. Erst wenn er überzeugt, wird daraus ein Auftrag, andernfalls entstehen keine Kosten.

Unverbindlich austauschen

Ich antworte in der Regel innerhalb von 24 Stunden. Direkt per Mail: torben@koennecke.it