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对象的属性。