The pseudoElement
property of a KeyframeEffect
interface is a string representing the pseudo-element being animated. It may be null
for animations that do not target a pseudo-element. It performs as both a getter and a setter, except with animations and transitions generated by CSS.
<div id="text">Some text</div>
<pre id="log"></pre>
#text::after {
content: "⭐";
display: inline-block;
}
#text::before {
content: "😊";
display: inline-block;
}
const log = document.getElementById("log");
const text = document.getElementById("text");
const animation = text.animate(
[
{ transform: "rotate(0)" },
{ transform: "rotate(180deg)" },
{ transform: "rotate(360deg)" },
],
{ duration: 3000, iterations: Infinity, pseudoElement: "::after" },
);
function logPseudoElement() {
const keyframeEffect = animation.effect;
log.textContent = `Value of pseudoElement animated: ${keyframeEffect.pseudoElement}`;
requestAnimationFrame(logPseudoElement);
}
function switchPseudoElement() {
const keyframeEffect = animation.effect;
keyframeEffect.pseudoElement =
keyframeEffect.pseudoElement === "::after" ? "::before" : "::after";
setTimeout(switchPseudoElement, 6000);
}
switchPseudoElement();
logPseudoElement();