Element.animate()

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2020.

* Some parts of this feature may have varying levels of support.

La méthode animate() de l'interface Element est un raccourci permettant de créer un nouvel objet Animation, de l'appliquer à un élément puis de la jouer. Elle retourne l'instance Animation alors créée.

Note : Les éléments peuvent avoir plusieurs animations qui leur sont appliquées. Vous pouvez obtenir une liste des animations qui affectent un élément en appelant Element.getAnimations().

Syntaxe

js
animate(keyframes, options);

Paramètres

keyframes

Un tableau d'objets représentant les étapes ou un objet dont les propriétés sont les tableaux des valeurs sur lesquelles itérer. Voir les formats de keyframe pour plus de détails.

options

Soit un entier indiquant la durée de l'animation en millisecondes, ou un objet qui contient une ou plusieurs propriétés de temporisation décrites dans le paramètre options pour KeyframeEffect() et/ou les options suivantes :

id Facultatif

Une propriété unique pour animate() : il s'agit d'une chaîne de caractères DOMString qu'on pourra utiliser pour faire référence à l'animation en question.

Valeur de retour

Renvoie un objet Animation.

Exemples

Dans la démonstration Dans le terrier du lapin (avec l'API Web Animation), on utilise la méthode animate() pour créer et immédiatement jouer une animation sur l'élément #tunnel afin que celui-ci défile vers le haut de façon infinie (voir les bords). Voyez ici les objets passés comme étapes et les options de temporisation.

js
document.getElementById("tunnel").animate(
  [
    // étapes/keyframes
    { transform: "translateY(0px)" },
    { transform: "translateY(-300px)" },
  ],
  {
    // temporisation
    duration: 1000,
    iterations: Infinity,
  },
);

Étapes initiales ou finales implicites

Pour les navigateurs récents, il est possible d'indiquer uniquement un état de début ou de fin pour une animation (c'est-à-dire une seule étape), c'est le navigateur qui déduira, si possible, l'autre étape (de début ou de fin donc). Prenons comme exemple cette animation simple, l'objet pour l'étape ressemble à :

js
let rotate360 = [{ transform: "rotate(360deg)" }];

On a uniquement indiqué l'état final de l'animation, l'état initial est implicite.

Spécifications

Specification
Web Animations
# dom-animatable-animate

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
animate
Implicit to/from keyframes are supported
options.composite parameter
options.id parameter
options.iterationComposite parameter
Experimental
options.pseudoElement parameter
options.rangeEnd parameter
Experimental
options.rangeStart parameter
Experimental
options.timeline parameter

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Experimental. Expect behavior to change in the future.

Voir aussi