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
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 :id
Facultatif-
Une propriété unique pour
animate()
: 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 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