[ Web Proxy ]
URL:
Viewing: https://developer.mozilla.org/fr/docs/Web/API/KeyframeEffect/target [Back]  [Original]

KeyframeEffect : la proprit target - Les API Web | MDN

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 proprit 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 proprit target de l'interface KeyframeEffect reprsente l'lment ou le pseudo-lment anim. Elle peut valoir une valeur null pour les animations qui ne ciblent pas un lment spcifique. Elle agit la fois comme accesseur et mutateur, sauf pour les animations et transitions gnres par CSS.

Dans cet article

Valeur

Un objet Element ou null.

Exemples

Dans l'exemple suivant, emoji est dfini comme l'lment target animer :

js
const emoji = document.querySelector("div"); // lment  animer

const rollingKeyframes = new KeyframeEffect(
  emoji,
  [
    { transform: "translateX(0) rotate(0)" }, // image-cl
    { transform: "translateX(200px) rotate(1.3turn)" }, // image-cl
  ],
  {
    // options des images-cls
    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>

Spcifications

Spcification
Web Animations
# dom-keyframeeffect-target

Compatibilit des navigateurs

Voir aussi


Web Proxy Viewer  |  New URL  |  Original Page