KeyframeEffect: pseudoElement プロパティ

Baseline 広く利用可能

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

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

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

メモ: 古い単一コロンの構文である :before, :after, :first-letter, :first-line を設定した場合、文字列は二重コロンの新しいバージョン(それぞれ ::before, ::after, ::first-letter, ::first-line)に変換されます。

値

文字列または null です。

例外

SyntaxError DOMException: このプロパティを要素に設定しようとした際に発生する例外です。不正な擬似要素(存在しないかスペルミス)が原因です。プロパティは変更されません。

例

html

<div id="text">テキスト</div>
<pre id="log"></pre>

css

#text::after {
 content: "👹";
 display: inline-block; /* `transform` プロパティはインライン要素に適用されないので、必要です */
 font-size: 2rem;
}
#text::before {
 content: "🤠";
 display: inline-block;
 font-size: 2rem;
}

const log = document.getElementById("log");
const text = document.getElementById("text");
// キーフレームを作成し、アニメーションを開始する
const animation = text.animate([{ transform: "rotate(360deg)" }], {
 duration: 3000,
 iterations: Infinity,
 pseudoElement: "::after",
});
// KeyframeEffect.pseudoElement の値を取得する
function logPseudoElement() {
 const keyframeEffect = animation.effect;
 log.textContent = `Value of pseudoElement animated: ${keyframeEffect.pseudoElement}`;
 requestAnimationFrame(logPseudoElement);
}
// 6 秒ごとに擬似要素のアニメーションを切り替える
function switchPseudoElement() {
 const keyframeEffect = animation.effect;
 keyframeEffect.pseudoElement =
 keyframeEffect.pseudoElement === "::after" ? "::before" : "::after";
 setTimeout(switchPseudoElement, 6000);
}
switchPseudoElement();
logPseudoElement();

[フレーム]