Element.animate()
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()
(en-US).
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 (en-US) 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.
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
BCD tables only load in the browser