KeyframeEffect

Constructeur

KeyframeEffect()

Retourne une nouvelle instance d'objet KeyframeEffect, 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 être null 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 être null 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 constructeur KeyframeEffect 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 à animer

const 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();

<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;
}

Spécifications

Compatibilité des navigateurs

Voir aussi

• L'API Web Animations
• Animation