KeyframeEffect: pseudoElement-Eigenschaft

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.

Die pseudoElement-Eigenschaft des KeyframeEffect-Interfaces ist ein Zeichenfolgenwert, der das animierte Pseudo-Element darstellt. Es kann null sein für Animationen, die kein Pseudo-Element anvisieren. Diese Eigenschaft fungiert sowohl als Getter als auch als Setter, außer bei Animationen und Übergängen, die durch CSS erzeugt werden.

Hinweis: Wird die veraltete Syntax mit einfachem Doppelpunkt wie :before, :after, :first-letter oder :first-line verwendet, wird die Zeichenfolge in ihre moderne Version mit doppeltem Doppelpunkt umgewandelt (::before, ::after, ::first-letter und ::first-line, entsprechend).

Wert

Eine Zeichenfolge oder null.

Ausnahmen

SyntaxError DOMException

Wird ausgelöst, wenn versucht wird, diese Eigenschaft auf ein Element oder ein ungültiges Pseudo-Element (entweder nicht existent oder falsch geschrieben) zu setzen. In diesem Fall bleibt die Eigenschaft unverändert.

Beispiele

html
<div id="text">Some text</div>
<pre id="log"></pre>
css
#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;
}
js
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();

Spezifikationen

Specification
Web Animations
# dom-keyframeeffect-pseudoelement

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
pseudoElement

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch