Get to know MDN better
Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
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.
L'interface KeyframeEffect de l'API Web Animations nous permet de créer des ensembles de propriétés et de valeurs animables, appelés images clés (keyframes en anglais). Ceux-ci peuvent ensuite être joués à l'aide du constructeur Animation().
AnimationEffect KeyframeEffectRetourne une nouvelle instance d'objet KeyframeEffect, et permet également de cloner une instance d'objet d'effet de keyframe existante.
Obtient et définit l'élément, ou l'élément d'origine du pseudo-élément, étant animé par cet objet. Cela peut être null pour les animations qui ne ciblent pas un élément ou un pseudo-élément spécifique.
KeyframeEffect.pseudoElementObtient et définit le sélecteur du pseudo-élément étant animé par cet objet. Cela peut être null pour les animations qui ne ciblent pas un pseudo-élément.
KeyframeEffect.iterationCompositeObtient et définit l'opération de composition d'itération pour résoudre les changements de valeur de propriété de cet effet de keyframe.
KeyframeEffect.compositeObtient et définit l'opération de composition pour résoudre les changements de valeur de propriété entre cet effet de keyframe et d'autres effets de keyframe.
Cette interface hérite de certaines de ses méthodes de son parent, AnimationEffect.
AnimationEffect.getComputedTiming()Retourne les valeurs de timing calculées et actuelles pour cet effet de keyframe.
KeyframeEffect.getKeyframes()Retourne les images clés calculées qui composent cet effet ainsi que leurs décalages de keyframe calculés.
AnimationEffect.getTiming()Retourne l'objet associé à l'animation contenant toutes les valeurs de timing de l'animation.
KeyframeEffect.setKeyframes()Remplace l'ensemble des images clés qui composent cet effet.
AnimationEffect.updateTiming()Met à jour les propriétés de timing spécifiées.
Dans l'exemple suivant, le constructeur KeyframeEffect est utilisé pour créer un ensemble de keyframes qui dictent comment l'emoji rofl doit rouler sur le sol :
| Web Animations # the-keyframeeffect-interface |
Activez JavaScript pour afficher ce tableau de compatibilité des navigateurs.
Cette page a été modifiée le 17 sept. 2025 par les contributeur·ice·s du MDN.
Votre modèle pour un internet meilleur.
Visitez la société mère à but non lucratif de Mozilla Corporation, la Fondation Mozilla.
Certaines parties de ce contenu sont protégées par le droit d'auteur ©1998—2026 des contributeurs individuels de mozilla.org. Contenu disponible sous une licence Creative Commons.