KeyframeEffect: target プロパティ

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2020年3月以降、すべてのブラウザーで利用可能です。

もっと詳しく
完全な互換性情報を見る

target は KeyframeEffect インターフェイスのプロパティで、アニメーションの対象となる要素または擬似要素を表します。特定の要素をターゲットとしないアニメーションでは null となる場合があります。CSS によって生成されるアニメーションおよび遷移を除き、ゲッターおよびセッターの両方として機能します。

値

Element または null です。

例

この例では、emoji がアニメーションの対象となる target 要素として設定されています。

const emoji = document.querySelector("div"); // アニメーションする要素
const rollingKeyframes = new KeyframeEffect(
 emoji,
 [
 { transform: "translateX(0) rotate(0)" }, // キーフレーム
 { transform: "translateX(200px) rotate(1.3turn)" }, // キーフレーム
 ],
 {
 // キーフレームオプション
 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>

body {
 box-shadow: 0 5px 5px pink;
}
div {
 width: fit-content;
 margin-left: calc(50% - 132px);
 font-size: 64px;
 user-select: none;
 margin-top: 1rem;
}

[フレーム]