Signatur
Beschreibung
Die Eigenschaft pseudoElement eines KeyframeEffect legt fest, ob die Keyframes auf das Zielelement (target) selbst oder auf eines seiner Pseudo-Elemente wie ::before, ::after oder ::marker angewendet werden. Ist der Wert null, wird das Element selbst animiert.
Damit lassen sich mit der Web Animations API Pseudo-Elemente per JavaScript animieren, ohne eigene CSS-Klassen oder @keyframes-Regeln anzulegen. Das ist nützlich für dekorative Effekte wie Unterstreichungen, Badges, Tooltip-Pfeile oder Aufzählungszeichen, die nur als Pseudo-Element existieren und daher nicht über das DOM erreichbar sind.
Der Wert kann beim Erzeugen über die Option pseudoElement im Konstruktor new KeyframeEffect() bzw. in Element.animate() übergeben oder später geändert werden. Die Eigenschaft ist lesend und schreibend. Die veraltete Schreibweise mit einem Doppelpunkt (":before") wird akzeptiert und intern zu "::before" normalisiert.
Wichtig: Das Pseudo-Element muss tatsächlich erzeugt werden. Bei ::before und ::after braucht es dafür im CSS eine content-Angabe. Ohne diese läuft die Animation zwar formal, man sieht aber nichts.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value | string | null | null | Beim Setzen: ein gültiger Pseudo-Element-Selektor wie "::before", "::after" oder "::marker", oder null, um das Zielelement selbst zu animieren. |
Rückgabewert
"::after") oder null, wenn kein Pseudo-Element animiert wird.Beispiele
::after-Unterstreichung per Element.animate() animieren
// CSS: .link::after { content: ""; display: block; height: 2px; background: currentColor; transform: scaleX(0); }
const link = document.querySelector('.link');
link.addEventListener('mouseenter', () => {
const anim = link.animate(
[{ transform: 'scaleX(0)' }, { transform: 'scaleX(1)' }],
{ duration: 250, easing: 'ease-out', fill: 'forwards', pseudoElement: '::after' }
);
console.log(anim.effect.pseudoElement);
});KeyframeEffect mit Konstruktor erzeugen und Wert auslesen
const badge = document.querySelector('.badge');
const effect = new KeyframeEffect(
badge,
[{ opacity: 0, transform: 'scale(0.5)' }, { opacity: 1, transform: 'scale(1)' }],
{ duration: 400, pseudoElement: ':before' } // veraltete Schreibweise
);
const animation = new Animation(effect, document.timeline);
animation.play();
console.log(effect.target === badge); // true
console.log(effect.pseudoElement); // normalisiertZiel zur Laufzeit wechseln und ungültige Werte abfangen
const item = document.querySelector('li');
const anim = item.animate(
[{ color: 'black' }, { color: 'crimson' }],
{ duration: 1000, iterations: Infinity, direction: 'alternate' }
);
console.log(anim.effect.pseudoElement); // null → das <li> selbst
// Nur das Aufzählungszeichen animieren
anim.effect.pseudoElement = '::marker';
console.log(anim.effect.pseudoElement);
try {
anim.effect.pseudoElement = 'kein-selektor';
} catch (err) {
console.log(err.name);
}// Wichtig · Fallstricke
- SyntaxError: Ein ungültiger oder nicht unterstützter Pseudo-Element-Selektor löst beim Setzen bzw. im Konstruktor eine
DOMExceptionvom TypSyntaxErroraus. Wie viele Pseudo-Elemente unterstützt werden, hängt vom Browser ab.::beforeund::afterfunktionieren überall,::markerund andere nicht zuverlässig. - Kein sichtbarer Effekt:
::before/::afterexistieren nur, wenn im CSScontentgesetzt ist. Manche Eigenschaften wietransformwirken außerdem nur, wenn das Pseudo-Element nichtdisplay: inlineist. - Nur Pseudo-Elemente mit Selektor: Die Eigenschaft nimmt keine Pseudo-Klassen wie
:hoveran. Es wird immer nur ein einzelnes Pseudo-Element angegeben, nicht eine Liste. - Kompatibilität: Verfügbar seit Chrome/Edge 84, Firefox 75 und Safari 14. Ältere Browser ignorieren die Option
pseudoElementinanimate()ohne Fehlermeldung und animieren dann das Element selbst. Vorher mit'pseudoElement' in KeyframeEffect.prototypeprüfen. getAnimations()auf dem Element liefert auch Animationen seiner Pseudo-Elemente, wenn{ subtree: true }übergeben wird.