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.
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
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
pourKeyframeEffect()
et/ou les options suivantes :
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.
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 à :
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
BCD tables only load in the browser