Animation UX & Performance 2025 — Praxiskompass

Warum GIF hinter sich lassen

GIF ist ineffizient, liefert schwache Qualität und hat starke Farbbeschränkungen. 2025 gilt: Für kurze Loops/UI‑Bewegungen animiertes WebP/AVIF, für Realvideo und Ton kurze Videos (MP4/WebM).

Formatauswahl

• Kurzschleifen/UI‑Animationen: animiertes WebP/AVIF
• Realfilm/Fotos mit Ton: MP4/WebM (Video)
• Transparenz nötig: animiertes WebP (AVIF‑Transparenz je nach Browser prüfen)

Implementierungsmuster

<video autoplay loop muted playsinline width="640" height="360" preload="metadata">
  <source src="/loop.webm" type="video/webm" />
  <source src="/loop.mp4" type="video/mp4" />
  <!-- Fallback‑Bild -->
  <img src="/loop.jpg" alt="Kurze Schleife" />
  
</video>

Tipps für Erlebnis‑Design

• prefers-reduced-motion respektieren (per CSS/JS abschaltbar).
• FCP/LCP nicht blockieren: erst kurz vor Interaktion laden.
• Thumbnail als Standbild, beim Abspielen Animation/Video nachladen.

Bewegung in CSS reduzieren

@media (prefers-reduced-motion: reduce) {
  .anim { animation: none !important; transition: none !important; }
}

Budgetdenken (Performance & Daten)

• Hero‑Videos auf etwa 500–800KB begrenzen (für Bildqualität: Poster‑Standbild + verzögertes Abspielen).
• Keine Mehrfach‑Wiedergabe: auf eine Instanz per Nutzeraktion konzentrieren.
• Mobil: preload="none" als Standard, src erst nach Interaktion setzen.

Checkliste

• [ ] GIF → WebP/AVIF/Video migrieren
• [ ] Transparenz/Loop‑Anforderungen klären
• [ ] prefers-reduced-motion implementiert
• [ ] Lazy‑Load und Cache optimiert

Fallstudien

• Loading‑Indicator: durch CSS‑Animation ersetzt und 30KB eingespart.
• Hero‑Animation als Video: 2,4MB GIF → 420KB WebM (gleiche Wirkung).
• Start per Scroll: IntersectionObserver injiziert src bei 30% Sichtbarkeit.

FAQ

• Q: Bei welcher Breite sollte Video gestoppt werden?

• A: Rücksicht auf Bandbreite und Akku: mobil nur stumm/kurz automatisch. Längere Wiedergabe per Nutzeraktion.

• Q: WebP oder AVIF?

• A: AVIF komprimiert meist besser, aber WebP parallel für Kompatibilität.

• Q: Auswirkungen auf SEO?

• A: LCP/CLS nicht verschlechtern. Autoplay im Hero vermeiden; Poster‑Standbild + verzögertes Abspielen ist sicher.

• Q: Untertitel und Barrierefreiheit?

• A: Bedeutungsvolle Videos mit Untertiteln versehen; Tastaturbedienung/Stop/Volume unterstützen.

Gestaltungsprinzipien — Bewegung mit Zweck

• Sinn: Bewegung auf Zustandswechsel/Ursache‑Wirkung/Hierarchie beschränken.
• Sicherheit: >3Hz‑Flackern und große Zoom/Rotationen vermeiden (WCAG 2.3.1).
• Konsistenz: gleiche Komponente → gleiche Zeiten/Easing.
• Reversibilität: bei Ausfall muss statisches UI die Funktion tragen.

Zeit und Easing — Richtwerte

• Kleine Transitionen: 120–180ms / cubic-bezier(0.2, 0, 0, 1)
• Container/Modal: 180–240ms / ease-out
• Seitenwechsel (Crossfade/Slide): 240–320ms / ease-in-out
• Feder (physikalisch): damping: 20–28, stiffness: 140–220

.btn {
  transition: transform 160ms cubic-bezier(.2,0,0,1), box-shadow 160ms ease-out;
}
.btn:active { transform: translateY(1px); }

Web Animations API und Feder

// WAAPI mit Rücksicht auf Reduced Motion
const prefersReduced = matchMedia('(prefers-reduced-motion: reduce)').matches;
const el = document.querySelector('.card');
if (!prefersReduced && el) {
  el.animate([
    { transform: 'translateY(8px)', opacity: 0 },
    { transform: 'translateY(0)', opacity: 1 },
  ], {
    duration: 220,
    easing: 'cubic-bezier(.2,0,0,1)',
    fill: 'both'
  });
}

// Einfache Feder‑Approximation
function springTo(el, to = 0, { stiffness = 180, damping = 22 } = {}) {
  let v = 0; // velocity
  let x = 1; // normalized position
  const dt = 1/60;
  function frame() {
    const f = -stiffness * (x - to) - damping * v;
    v += f * dt;
    x += v * dt;
    el.style.transform = `translateY(${x * 20}px)`;
    if (Math.abs(v) > 0.001 || Math.abs(x - to) > 0.001) requestAnimationFrame(frame);
  }
  frame();
}

Scroll‑gebundene Optimierung

• Start bei 25–33% Viewport‑Sichtbarkeit per IntersectionObserver.
• position: sticky nutzen; Parallax/Pinning mit minimaler JS‑Berechnung.
• Hochkosten‑Properties (top/left/width/height) meiden; transform/opacity bevorzugen.

const io = new IntersectionObserver(entries => {
  entries.forEach(e => {
    if (e.isIntersecting) e.target.classList.add('in');
  });
}, { threshold: 0.3 });
document.querySelectorAll('.reveal').forEach(n => io.observe(n));

Lottie / CSS / Video — Einsatz

• Lottie (Vektor‑JSON): UI‑Icons/leichte Illustrationen; farbwechselbar/auflösungsunabhängig.
• CSS: Mikro‑Interaktionen; geringe Abhängigkeiten, niedrige Laufzeitkosten.
• Video: Fotoqualität/komplexe Effekte; gute Kompression, Untertitel/Ton möglich.

Entscheidung: „Bildqualität zuerst → Video“, „leichter UI‑Loop → CSS/Lottie“, „Transparenz nötig → Lottie/animiertes WebP“.

Performance‑Messung

// Auswirkungen auf Paint/Compositing nachvollziehen
new PerformanceObserver((list) => {
  for (const e of list.getEntries()) {
    console.log(e.entryType, e.name, e.duration);
  }
}).observe({ entryTypes: ['longtask', 'measure'] });

performance.mark('anim:start');
// ... run animation ...
performance.mark('anim:end');
performance.measure('anim:duration', 'anim:start', 'anim:end');

Zugänglichkeit/Sicherheit

• Stopp/Pause/Ausblenden anbieten (WCAG 2.2.2).
• prefers-reduced-motion mit Alternativen; Autoplay standardmäßig stumm.
• 3Hz–60Hz‑Flackern vermeiden, Licht‑Kontrast dämpfen.

Fehlersichere Umsetzung — Check

• [ ] Ziel und KPI definieren (CTR/Verweildauer/Leserate …)
• [ ] Bewegung auf transform/opacity beschränken (kein Layout‑Reflow)
• [ ] Lazy‑Load/Nutzeraktion als Trigger
• [ ] Reduced‑Motion‑Regeln und manuelle Stopp‑UI
• [ ] A/B‑Test für Wirksamkeit

Vertiefte FAQ

• Q: Wird Lottie zu schwer?

  • A: Primitive reduzieren und Framerate optimieren. Sonst auf Video wechseln.

• Q: Gibt es unvermeidbare GIF‑Fälle?

  • A: Nur bei harten Kompatibilitätszwängen. Kompromisse bei Größe/Qualität bewusst akzeptieren und eng begrenzen.

• Q: Scroll‑gebunden ruckelt es

  • A: requestAnimationFrame und IntersectionObserver kombinieren, Thread‑Last senken und will-change nicht überstrapazieren.