Web Animations API (WAAPI)

Die Web Animations API (WAAPI) ist eine native Browser-API, die CSS-Animationen und CSS-Transitions mit JavaScript-Kontrolle vereint und dabei auf dieselbe performante Animations-Engine des Browsers zurückgreift.

Was ist die Web Animations API?

Die Web Animations API (offiziell: Web Animations, W3C Specification) wurde entwickelt, um die Lücke zwischen deklarativen CSS-Animationen und imperativem JavaScript zu schließen. Vor der WAAPI musste man für dynamisch gesteuerte Animationen auf JavaScript-Bibliotheken oder requestAnimationFrame-Loops zurückgreifen.

Die API bietet:

• Dynamisch berechnete Animations-Werte zur Laufzeit
• Vollständige Playback-Kontrolle (play, pause, reverse, cancel)
• Promise-basierte Callbacks (finished, ready)
• Synchronisation mehrerer Animationen
• Zugriff auf laufende CSS-Animationen

Die WAAPI wird inzwischen von allen modernen Browsern unterstützt (Can I Use, 2024: >96 %).

Erklärung

Die animate()-Methode

Die einfachste Schnittstelle ist .animate() auf jedem DOM-Element:

```javascript const element = document.querySelector('.box');

const animation = element.animate( // Keyframes – wie CSS @keyframes [ { transform: 'translateY(0)', opacity: 1 }, { transform: 'translateY(100px)', opacity: 0 } ], // Options – Timing-Objekt { duration: 600, // Millisekunden easing: 'ease-out', delay: 200, fill: 'forwards', // entspricht animation-fill-mode iterations: 1 // Anzahl Wiederholungen, Infinity möglich } ); ```

Playback-Kontrolle

```javascript animation.pause(); animation.play(); animation.reverse(); animation.cancel(); animation.finish();

// Geschwindigkeit animation.playbackRate = 2; // doppelte Geschwindigkeit animation.playbackRate = -1; // rückwärts abspielen

// Aktueller Fortschritt console.log(animation.currentTime); // in ms console.log(animation.effect.getComputedTiming().progress); // 0–1 ```

Promise-basierte Callbacks

```javascript const animation = element.animate([ { opacity: 0 }, { opacity: 1 } ], 400);

// Warten bis fertig animation.finished.then(() => { console.log('Animation abgeschlossen'); element.remove(); });

// Warten bis startbereit animation.ready.then(() => { console.log('Animation startet'); });

// Events animation.addEventListener('finish', () => { / ... / }); animation.addEventListener('cancel', () => { / ... / }); ```

KeyframeEffect und AnimationTimeline

Für komplexere Szenarien bietet die API explizite Klassen:

```javascript const keyframes = new KeyframeEffect( element, [ { transform: 'scale(1)', easing: 'ease-in' }, { transform: 'scale(1.5)', easing: 'ease-out' }, { transform: 'scale(1)' } ], { duration: 1000, iterations: Infinity } );

const animation = new Animation(keyframes, document.timeline); animation.play(); ```

Laufende CSS-Animationen abfragen

```javascript // Alle laufenden Animationen eines Elements const animations = element.getAnimations();

// Alle Animationen auf der Seite const alleAnimationen = document.getAnimations();

// Eine CSS-Animation pausieren animations.forEach(anim => { if (anim.animationName === 'meinAnimation') { anim.pause(); } }); ```

Beispiele

Sequenzielle Animationen

```javascript async function sequenz(elemente) { for (const el of elemente) { await el.animate( [ { opacity: 0, transform: 'translateY(20px)' }, { opacity: 1, transform: 'translateY(0)' } ], { duration: 400, easing: 'ease-out', fill: 'forwards' } ).finished; } }

sequenz(document.querySelectorAll('.list-item')); ```

Parallele Animationen synchronisieren

```javascript const el1 = document.querySelector('.header'); const el2 = document.querySelector('.content');

const anim1 = el1.animate( [{ transform: 'translateX(-100%)' }, { transform: 'translateX(0)' }], { duration: 500, easing: 'ease-out', fill: 'forwards' } );

const anim2 = el2.animate( [{ opacity: 0 }, { opacity: 1 }], { duration: 500, delay: 200, fill: 'forwards' } );

Promise.all([anim1.finished, anim2.finished]).then(() => { console.log('Alle Animationen fertig'); }); ```

Dynamisch berechnete Werte

```javascript // Animation basierend auf Elementgröße function springAnim(element) { const hoehe = element.offsetHeight;

element.animate( [ { transform: translateY(${hoehe}px), opacity: 0 }, { transform: 'translateY(0)', opacity: 1 } ], { duration: 600, easing: 'cubic-bezier(0.34, 1.56, 0.64, 1)', // Federkurve fill: 'forwards' } ); } ```

In der Praxis

Die WAAPI eignet sich besonders für:

• Interaktionsgesteuerte Animationen, deren Werte sich aus User-Input ergeben (Mausposition, Scroll-Offset, etc.)
• Modale, Toasts, Drawers: Elemente, die eingeblendet werden und nach ihrer Verwendung per .finished entfernt werden können
• Spielähnliche Interfaces: Wenn play(), pause(), reverse() und playbackRate benötigt werden
• A/B-Testing: Animationen, die zur Laufzeit konfiguriert werden

Vergleich mit CSS: Die WAAPI und CSS-Animationen nutzen exakt dieselbe Browser-Engine. Es gibt keinen Performance-Nachteil durch die WAAPI. Die Entscheidung zwischen beiden ist eine Frage der Kontrolle vs. Einfachheit.

Vergleich & Abgrenzung

Häufige Fragen (FAQ)

Ist die WAAPI dasselbe wie CSS-Animationen? Sie nutzen dieselbe Engine, aber unterschiedliche Schnittstellen. Die WAAPI ist die JavaScript-API zu dieser Engine, CSS-Animationen sind die deklarative Variante.

Kann ich eine laufende CSS-Animation per WAAPI steuern? Ja! element.getAnimations() gibt alle Animationen zurück – egal ob per CSS oder JS erstellt.

Wie gehe ich mit `prefers-reduced-motion` um? ``javascript const reduzierteBewegung = window.matchMedia('(prefers-reduced-motion: reduce)').matches; const dauer = reduzierteBewegung ? 0 : 500; element.animate([...], { duration: dauer }); ``

Unterstützt die WAAPI SVG-Animationen? Ja, die API funktioniert auf allen DOM-Elementen einschließlich SVG. Kombiniert mit SVG Animationen entsteht volle SVG-Animationskontrolle.

Verwandte Einträge

• CSS Animationen (@keyframes) – Die deklarative Alternative zur WAAPI
• CSS Transitions – Für einfache Übergänge ohne JS
• GSAP (GreenSock) – Grundlagen – Bibliothek mit ähnlichen Zielen, aber mehr Features
• Framer Motion für React – Abstraktion über WAAPI für React
• Performance-Optimierung bei Web-Animationen – Performance-Aspekte der Animations-Engine

Weiterführend

• MDN Web Docs: Web Animations API (2024) – developer.mozilla.org
• Dan Wilson: Let's Talk About the Web Animations API (2022) – danielcwilson.com
• Cassie Evans: Unlocking the Power of WAAPI (2023) – cassie.codes
• W3C: Web Animations Specification – drafts.csswg.org
• Chrome Developers: Orchestrating Complexity with Web Animations API (2021)