Web Animations API

L'API Web Animations permet de synchroniser et de chronométrer les changements de présentation d'une page Web, c'est-à-dire l'animation d'éléments DOM. Pour ce faire, il combine deux modèles : le modèle de synchronisation et le modèle d'animation.

Concepts et utilisation

L'API Web Animations fournit un langage commun aux navigateurs et aux développeurs pour décrire les animations sur les éléments DOM. Pour obtenir plus d'informations sur les concepts derrière l'API et comment l'utiliser, lisezUtilisation de l'API Web Animations.

Interfaces d'animations Web

Animation: Fournit des commandes de lecture et une chronologie pour un nœud ou une source d'animation. Peut prendre un objet créé avec le constructeurKeyframeEffect().
KeyframeEffect: Décrit des ensembles de propriétés et de valeurs animables, appeléesimages clés (keyframes) et leursoptions de minutage . Ceux-ci peuvent ensuite être lus en utilisant le constructeurAnimation().
AnimationTimeline: Représente la chronologie de l'animation. Cette interface existe pour définir les fonctionnalités de la chronologie (héritées parDocumentTimeline et les futurs objets de chronologie) et n'est pas elle-même accessible par les développeurs.
AnimationEvent: Fait actuellement partie des animations CSS.
DocumentTimeline: Représente les chronologies d'animation, y compris la chronologie du document par défaut (accessible à l'aide de la propriétéDocument.timeline).
EffectTiming: Element.animate(),KeyframeEffectReadOnly.KeyframeEffectReadOnly() etKeyframeEffect.KeyframeEffect() acceptent tous un dictionnaire facultatif objet des propriétés de synchronisation.

Extensions à d'autres interfaces

L'API Web Animations ajoute de nouvelles fonctionnalités àdocument etelement.

Extensions à l'interface`Document`

document.timeline: L'objetDocumentTimeline représentant la chronologie du document par défaut.
document.getAnimations(): Renvoie un tableau d'objetsAnimation actuellement en vigueur sur les éléments dudocument.

Extensions à l'interface`Element`

Element.animate(): Une méthode de raccourci pour créer et lire une animation sur un élément. Il renvoie l'instance d'objetAnimation créée.
Element.getAnimations(): Renvoie un tableau d'objetsAnimation affectant actuellement un élément ou qui sont programmés pour le faire à l'avenir.