| [ Web Proxy ] |
| Viewing: https://developer.mozilla.org/fr/docs/Web/API/KeyframeEffect/target | [Back] [Original] |
Get to know MDN better
Cette page a t traduite partir de l'anglais par la communaut. Vous pouvez contribuer en rejoignant la communaut francophone sur MDN Web Docs.
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.
Un objet Element ou null.
Dans l'exemple suivant, emoji est dfini comme l'lment target animer :
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);
<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;
}
| Spcification |
|---|
| Web Animations # dom-keyframeeffect-target |
KeyframeEffectCette page a t modifie le 17 sept. 2025 par les contributeurices du MDN.
KeyframeEffectCertaines parties de ce contenu sont protges par le droit d'auteur 19982026 des contributeurs individuels de mozilla.org. Contenu disponible sous une licence Creative Commons.
| Web Proxy Viewer | New URL | Original Page |