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

瀏覽器相容性

另見