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 :
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
- L'API Web Animations
- Propriété des objets
KeyframeEffect