Element.animate()
Baseline
Widely available
*
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis mars 2020.
* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.
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
optionspourKeyframeEffect()et/ou les options suivantes :idFacultatif-
Une propriété unique pour
animate(): il s'agit d'une chaîne de caractèresDOMStringqu'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.
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
Chargement…