Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

KeyframeEffect : la propriété target

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨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 :

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
<div>🤣</div>

Spécifications

Specification
Web Animations
# dom-keyframeeffect-target

Compatibilité des navigateurs

Voir aussi