KeyframeEffect: target 屬性
KeyframeEffect 介面的 target 屬性代表正在被動畫化的元素或偽元素。對於不針對特定元素的動畫,它可以為 null。它既可以作為 getter,也可以作為 setter,但在 CSS 生成的動畫和過渡中除外。
值
一個 Element 或 null。
示例
在下面的示例中,emoji 被設定為要進行動畫的 target 元素
js
const emoji = document.querySelector("div"); // element to animate
const rollingKeyframes = new KeyframeEffect(
emoji,
[
{ transform: "translateX(0) rotate(0)" }, // keyframe
{ transform: "translateX(200px) rotate(1.3turn)" }, // keyframe
],
{
// keyframe options
duration: 2000,
direction: "alternate",
easing: "ease-in-out",
iterations: "Infinity",
},
);
const rollingAnimation = new Animation(rollingKeyframes, document.timeline);
rollingAnimation.play();
// logs "<div>🤣</div>"
console.log(rollingKeyframes.target);
html
<div>🤣</div>
規範
| 規範 |
|---|
| Web 動畫 # dom-keyframeeffect-target |
瀏覽器相容性
載入中…
另見
- Web Animations API
KeyframeEffect物件的屬性。