KeyframeEffect: target 属性

Baseline 已广泛支持

此功能已经成熟,并可在许多设备和浏览器版本上使用。自 ⁨2020 年 3 月⁩起,它已在各浏览器中推出。

KeyframeEffect 接口的 target 属性代表正在被动画化的元素或伪元素。对于不针对特定元素的动画,它可以为 null。它既可以作为 getter,也可以作为 setter,但在 CSS 生成的动画和过渡中除外。

一个 Elementnull

示例

在下面的示例中,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

浏览器兼容性

另见