KeyframeEffect : la propriété target

Baseline Large disponibilité

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.

Dans cet article

Valeur

Un objet Element ou null.

Exemples

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

js
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

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

Spécification

Web Animations
# dom-keyframeeffect-target

Compatibilité des navigateurs

Activez JavaScript pour afficher ce tableau de compatibilité des navigateurs.

Voir aussi

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

Aider à améliorer MDN

Cette page vous a-t-elle été utile ?

Oui Non

Apprendre à contribuer

Cette page a été modifiée le 17 sept. 2025 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu

Web Animations API
KeyframeEffect
Constructeur
1. KeyframeEffect()
Propriétés d'instance
Méthodes d'instance
1. getKeyframes()
2. setKeyframes()
Héritage
1. AnimationEffect
Pages liées à Web Animations
Guides
1. Utilisation de l'API Web Animations
2. Web Animations API Concepts
3. Keyframe Formats
4. Trucs et astuces pour les animations CSS