Element.animate în JavaScript

const animatie = element.animate(cadre, { duration, easing, iterations, fill });

Ce face Element.animate

animate primește cadrele cheie (un tablou de stări CSS) și opțiunile: duration în milisecunde, easing, iterations (Infinity pentru buclă), delay, direction și fill: "forwards" ca starea finală să rămână.

Returnează un obiect Animation cu metodele pause(), play(), reverse(), cancel() și promisiunea finished, pe care o poți aștepta cu await. Animațiile de transform și opacity sunt cele mai fluide.

Parametri

Parametru	Descriere
cadre	Un tablou de obiecte cu proprietăți CSS (sau un obiect cu tablouri de valori).
optiuni	Durata (număr) sau un obiect cu duration, easing, iterations, fill…

Ce returnează

Un obiect Animation.

Exemple

Exemplul 1: Scuturarea unui câmp greșit

const camp = document.querySelector("#parola");

const animatie = camp.animate(
  [{ transform: "translateX(0)" }, { transform: "translateX(-8px)" }, { transform: "translateX(8px)" }, { transform: "translateX(0)" }],
  { duration: 300, iterations: 2, easing: "ease-in-out" },
);

await animatie.finished;
console.log("animație terminată", animatie.playState);

Rezultat în browser

animație terminată finished

Greșeli frecvente

• Animezi width, top sau left. Fiecare cadru recalculează aranjarea paginii și animația sacadează; animează transform și opacity.

Comenzi înrudite

• requestAnimationFrame: Rulează o funcție chiar înainte de următoarea redesenare a ecranului; baza animațiilor fluide.
• classList: Adaugă, scoate sau comută clase CSS pe un element.
• document.startViewTransition: Animează automat trecerea de la o stare a paginii la alta (View Transitions API).