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

BCD tables only load in the browser

Siehe auch