KeyframeEffect : la propriété target

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⁩.

La propriété target de l'interface KeyframeEffect représente l'élément ou le pseudo-élément animé. Elle peut valoir une valeur null pour les animations qui ne ciblent pas un élément spécifique. Elle agit à la fois comme accesseur et mutateur, sauf pour les animations et transitions générées par CSS.

Valeur

Un objet Element ou null.

Exemples

Dans l'exemple suivant, emoji est défini comme l'élément target à animer :

const emoji = document.querySelector("div"); // élément à animer

const rollingKeyframes = new KeyframeEffect(
  emoji,
  [
    { transform: "translateX(0) rotate(0)" }, // image-clé
    { transform: "translateX(200px) rotate(1.3turn)" }, // image-clé
  ],
  {
    // options des images-clés
    duration: 2000,
    direction: "alternate",
    easing: "ease-in-out",
    iterations: "Infinity",
  },
);

const rollingAnimation = new Animation(rollingKeyframes, document.timeline);
rollingAnimation.play();

// affiche "<div>🤣</div>"
console.log(rollingKeyframes.target);

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

Spécifications

Specification
Web Animations # dom-keyframeeffect-target

Compatibilité des navigateurs

Voir aussi

L'API Web Animations
Propriété des objets KeyframeEffect

Help improve MDN

Learn how to contribute

Cette page a été modifiée le ⁨17 sept. 2025⁩ par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content