KeyframeEffect: pseudoElement property
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2020.
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.
Note: If set to the legacy single-colon syntax of :before
, :after
, :first-letter
, or :first-line
, the string is transformed into its double-colon modern version (::before
, ::after
, ::first-letter
, and ::first-line
, respectively).
Value
A string or null
.
Exceptions
SyntaxError
DOMException
-
Thrown when trying to set this property to an element, an invalid pseudo-element (either non-existent or misspelled). The property is then left unchanged.
Examples
<div id="text">Some text</div>
<pre id="log"></pre>
#text::after {
content: "👹";
display: inline-block; /* Needed as the `transform` property does not apply to inline elements */
font-size: 2rem;
}
#text::before {
content: "🤠";
display: inline-block;
font-size: 2rem;
}
const log = document.getElementById("log");
const text = document.getElementById("text");
// Create the keyframe and launch the animation
const animation = text.animate([{ transform: "rotate(360deg)" }], {
duration: 3000,
iterations: Infinity,
pseudoElement: "::after",
});
// Get the value of KeyframeEffect.pseudoElement
function logPseudoElement() {
const keyframeEffect = animation.effect;
log.textContent = `Value of pseudoElement animated: ${keyframeEffect.pseudoElement}`;
requestAnimationFrame(logPseudoElement);
}
// Every 6 seconds, switch the pseudo-element animated
function switchPseudoElement() {
const keyframeEffect = animation.effect;
keyframeEffect.pseudoElement =
keyframeEffect.pseudoElement === "::after" ? "::before" : "::after";
setTimeout(switchPseudoElement, 6000);
}
switchPseudoElement();
logPseudoElement();
Specifications
Specification |
---|
Web Animations # dom-keyframeeffect-pseudoelement |
Browser compatibility
BCD tables only load in the browser
See also
- Web Animations API
KeyframeEffect
interfaceKeyframeEffect()
constructortarget
property