KeyframeEffect

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.

L'interfaceKeyframeEffect de l'API Web Animations nous permet de créer des ensembles de propriétés et de valeurs animables, appelésimages clés (keyframes en anglais). Ceux-ci peuvent ensuite être joués à l'aide du constructeurAnimation().

Constructeur

KeyframeEffect(): Retourne une nouvelle instance d'objetKeyframeEffect, et permet également de cloner une instance d'objet d'effet de keyframe existante.

Propriétés

KeyframeEffect.target: Obtient et définit l'élément, ou l'élément d'origine du pseudo-élément, étant animé par cet objet. Cela peut êtrenull pour les animations qui ne ciblent pas un élément ou un pseudo-élément spécifique.
KeyframeEffect.pseudoElement: Obtient et définit le sélecteur du pseudo-élément étant animé par cet objet. Cela peut êtrenull pour les animations qui ne ciblent pas un pseudo-élément.
KeyframeEffect.iterationComposite: Obtient 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.composite: Obtient 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.

Méthodes

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.

Exemples

Dans l'exemple suivant, le constructeurKeyframeEffect est utilisé pour créer un ensemble de keyframes qui dictent comment l'emoji rofl doit rouler sur le sol :

const emoji = document.querySelector("div"); // l'élément à animerconst rollingKeyframes = new KeyframeEffect(  emoji,  [    { transform: "translateX(0) rotate(0)" }, // image clé    { transform: "translateX(200px) rotate(1.3turn)" }, // image clé  ],  {    // options d'image clé    duration: 2000,    direction: "alternate",    easing: "ease-in-out",    iterations: "Infinity",  },);const rollingAnimation = new Animation(rollingKeyframes, document.timeline);// jouer l'animation "mort de rire"rollingAnimation.play();

html

<div>🤣</div>

body {  box-shadow: 0 5px 5px pink;}div {  width: fit-content;  margin-left: calc(50% - 132px);  font-size: 64px;  user-select: none;  margin-top: 1rem;}