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
Loading…
Voir aussi
- L'API Web Animations
- Propriété des objets
KeyframeEffect