Animation auf Webseiten ist 2026 ein gelöstes Problem

Anders als 2010 musst du nicht mehr zwischen „GIF oder Flash" wählen. Sechs etablierte Techniken decken alle relevanten Use-Cases ab. Die Wahl ist keine Geschmacks-Frage, sondern hängt am Inhalt: Vektor- vs. Raster-Animation, kurze vs. lange Loops, ob Interaktion gebraucht wird, ob Transparenz nötig ist.

1. CSS-Animationen und Transitions

Für alles, was direkt im DOM passiert — Hover-Effekte, Mikro-Interaktionen, Buttons, Skeleton-Loader, Page-Transitions. @keyframes, transition und die Web Animations API decken 80 % aller UI-Animations-Bedürfnisse ab.

Größe: 0 KB (nur CSS-Bytes). Performance: exzellent dank GPU-beschleunigtem Compositor. Wann: bei UI-Elementen, die im DOM bleiben und durch State-Änderungen animiert werden.

Wann nicht: bei komplexen Vektor-Animationen mit Pfad-Morphing, choreographierten Bewegungs-Sequenzen oder wenn du Anbietern Animations-Designs aus After Effects geben willst, ohne sie als Code nachzubauen.

2. SVG-Animationen mit SMIL und CSS

SVG-Pfade lassen sich direkt animieren — Strichlinien zeichnen, Farbverläufe verändern, Pfad-Morphing zwischen Formen. Drei Wege: klassisches SMIL (<animate>-Tag), CSS auf SVG-Elementen, oder JavaScript via Anime.js / GSAP. Hintergrund zur Format-Eigenheit in unserer SVG-Geschichte.

Größe: meist unter 10 KB für komplexe Animationen. Performance:gut bei einfachen Animationen, problematisch bei tausenden gleichzeitig animierten Pfaden (DOM-Overhead). Wann: wenn die Animation skalieren muss und im DOM zugänglich sein soll (Charts, Diagramm-Animationen, Logo-Reveals).

3. Lottie

Lottie ist seit 2015 der Industrie-Standard für komplexe Vektor-Animationen aus After Effects. Designer exportieren die Komposition als JSON-Datei (oder das neuere dotLottie-Format), der Browser rendert sie zur Laufzeit als SVG oder Canvas. Im Hintergrund läuft die lottie-web-Library von Airbnb.

Größe: typisch 15–80 KB für eine 5-Sekunden-Animation mit Vektor-Elementen. Performance: gut auf modernen Geräten, kann auf Low-End-Android merklich werden, wenn die Komposition komplex ist (50+ Layer).Wann: Onboarding-Illustrationen, Hero-Section-Animations, Empty-State- Icons, Konfetti-Effekte nach erfolgreichen Aktionen, Loading-Spinner mit Brand-Identität.

Wann nicht: bei Raster-Inhalten (Lottie ist Vektor-only), bei sehr komplexen Bewegungsunschärfen oder photorealistischen Effekten.

4. Animiertes WebP / AVIF

Für Raster-Animationen mit transparentem Hintergrund — also: animierte Sticker, kurze Demo-Loops, Reaction-Memes. Animiertes WebP existiert seit 2016, animiertes AVIF seit 2023.

Größe: animiertes WebP typisch 25–35 % der GIF-Größe, AVIF nochmal 30–50 % kleiner. Eine 5-Sekunden-Loop bei 800×450 wird zu einem ~600 KB-WebP oder ~400 KB-AVIF. Performance: nativ in allen Mainstream-Browsern, harte Hardware-Beschleunigung. Wann: Sticker, Reaction-Animationen, Demo-GIFs in Doku-Seiten, animierte Logos auf transparentem Hintergrund.

Eine Tiefen-Gegenüberstellung mit klassischem GIF findest du in unserem GIF-vs.-WebP-Beitrag.

5. APNG

APNG ist die verlustfreie Schwester-Variante zu WebP-/AVIF-Animation. Vorteil: Pixel-exakte Erhaltung — wichtig für Pixel-Art- Animationen, UI-Sprites mit harten Kanten, Diagramme.

Größe: meist 2–3× so groß wie animiertes WebP, aber verlustfrei. Wann: verlustfreie Pixel-Art, UI-Sprites mit Marken-Identität, Demo- Loops, bei denen Komprimierungs-Artefakte stören würden. Wann nicht: für Foto-Inhalte (Datei wird zu groß).

6. MP4 / WebM Loop-Video

Für Hintergrund-Videos, Produkt-Demos, längere Animations-Sequenzen. Das<video>-Element mit autoplay muted loop playsinlineersetzt den klassischen GIF-Background mit deutlich besserer Komprimierung.

Größe: ein 10-Sekunden-Loop bei 1920×1080 als H.264-MP4 typisch 800 KB–1,5 MB, als AV1-WebM 400–700 KB. Performance: dedizierte Video-Decoder im Browser sind extrem effizient, oft sparsamer als WebP-Animationen bei vergleichbarer Qualität. Wann: Hero-Hintergründe, Produkt-Demonstrationen, längere als 5-Sekunden-Loops, alles mit Foto-Inhalten.

Wichtig: kein Alpha-Kanal in MP4 (Workarounds: WebM mit VP9-Alpha oder zwei Videos übereinander). Für transparente Hintergründe besser animiertes WebP/AVIF.

Entscheidungs-Matrix

  • Button-Hover, Mikro-Interaktionen: CSS-Transitions.
  • Onboarding-Illustrationen, Empty States, Loading-Spinner: Lottie.
  • Animierte Logos, Marken-Animationen: SVG mit CSS-Animations, oder Lottie bei komplexen Bewegungen.
  • Sticker, Reaction-Animationen mit Transparenz: animiertes WebP oder AVIF.
  • Pixel-Art-Animationen, UI-Sprites: APNG.
  • Hero-Section-Hintergrund, Produkt-Demo, Tutorial-Loops: MP4 / WebM.
  • Slack-Reactions: klassisches GIF — die Plattform versteht nichts anderes zuverlässig.

Accessibility-Pflichten 2026

WCAG 2.2 fordert: alle automatisch laufenden Animationen länger als 5 Sekunden müssen eine Pause-Möglichkeit haben. prefers-reduced-motion muss respektiert werden:

@media (prefers-reduced-motion: reduce) {
  .hero-animation { animation: none; }
  video.background { display: none; }
  img.lottie { content: url("static-fallback.svg"); }
}

Lottie unterstützt das nativ via autoPlay-Steuerung. Bei MP4 reicht es, die Video-Komponente bei reduced-motion durch ein statisches Poster-Bild zu ersetzen.

Performance-Budget

Animationen kosten Performance — sowohl Bytes als auch CPU. Faustregeln:

  • Über 200 KB pro Animation: hinterfragen, ob nicht eine simplere Technik reicht.
  • Mehr als zwei gleichzeitig laufende Lottie-Instanzen: Layout-Thrashing wahrscheinlich.
  • Background-Video auf Mobile: 3G-Test machen — viele Sites blockieren LCP damit.

Mehr zu Performance-Hebeln in unserem Core-Web-Vitals-Beitrag.

Quellen

airbnb.io/lottie · dotLottie Format · MDN — CSS Animations · MDN — Web Animations API · Google — Animated WebP · Mozilla — APNG Specification · WCAG 2.2 — 2.2.2 Pause, Stop, Hide · MDN — prefers-reduced-motion.