La méthodeanimate() de l'interfaceElement est un raccourci permettant de créer un nouvel objetAnimation, de l'appliquer à un élément puis de la jouer. Elle retourne l'instanceAnimation alors créée.

Syntaxe

animate(keyframes, options);

Paramètres

keyframes

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

options

Soitun 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 dansle paramètreoptions pourKeyframeEffect() et/ou les options suivantes :

idFacultatif

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

Valeur de retour

Renvoie un objetAnimation.

Exemples

Dans la démonstrationDans le terrier du lapin (avec l'APIWeb Animation), on utilise la méthodeanimate() 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 exemplecette 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

Compatibilité des navigateurs

Voir aussi

• L'APIWeb Animations
• Element.getAnimations()
• Animation