Startseite >JavaScript >JavaScript-Referenz – Methoden und Objekte >Element.animate()

Element.animate()

element.animate(keyframes, { duration, easing, fill, iterations })

Startet eine Animation eines Elements nach den angegebenen Keyframes – genau wie @keyframes in CSS, aber aus JavaScript gesteuert. Mit dem zurückgegebenen Objekt können Sie die Animation anhalten, abbrechen oder auf ihr Ende warten.

Das Beispiel arbeitet mit dem HTML über dem Code.

Parameter

  • keyframes – ein Array von Zuständen, zum Beispiel [{ opacity: 1 }, { opacity: 0 }].
  • duration – die Dauer in ms; easing – der zeitliche Verlauf ('ease-out'); fill – 'forwards' behält den Endzustand; iterations – die Anzahl der Wiederholungen (Infinity).

Rückgabewert

Ein Animation-Objekt (finished, pause(), play(), cancel(), playState).

Beispiele

<div id="notice" style="padding: 10px; background: #dfd">Gespeichert</div>

const notice = document.getElementById('notice');
const a = notice.animate([{ opacity: 1, transform: 'none' }, { opacity: 0, transform: 'translateY(-10px)' }], { duration: 150, easing: 'ease-in', fill: 'forwards' });
console.log(a.playState);
await a.finished;
console.log(a.playState, getComputedStyle(notice).opacity);
notice.remove();
const b = document.body.animate([{ opacity: 0.5 }, { opacity: 1 }], { duration: 1000 });
b.cancel();
console.log(b.playState);

Ausgabe:

running
finished 0
idle

Worauf Sie achten sollten

  • Ohne fill: 'forwards' kehrt das Element nach der Animation in seinen ursprünglichen Zustand zurück.
  • Animieren Sie vor allem transform und opacity – sie laufen auch auf schwächeren Geräten flüssig.
  • Berücksichtigen Sie prefers-reduced-motion (matchMedia()) und lassen Sie einfache Übergänge in CSS.

Browserunterstützung

Baseline – weithin verfügbar: in allen gängigen Browsern seit März 2020, gilt als weithin verfügbar seit September 2022. Ab Version: Chrome 36, Firefox 48, Safari 13.1; nicht in Node.js (Browser-API). Stand: Oktober 2026 (MDN browser-compat-data).

Siehe auch:
requestAnimationFrame()
window.matchMedia()
HTMLElement.style