KeyframeEffect : la propriété pseudoElement

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis ⁨septembre 2020⁩.

La propriété pseudoElement de l'interface KeyframeEffect est une chaîne de caractères représentant le pseudo-élément animé. Elle peut valoir null pour les animations qui ne ciblent pas de pseudo-élément. Elle agit comme accesseur et mutateur, sauf pour les animations et transitions générées par CSS.

Note : Si elle est définie avec la syntaxe héritée à un seul deux-points (:) de :before, :after, :first-letter, ou :first-line, la chaîne de caractères est transformée en sa version moderne à double deux-points (::before, ::after, ::first-letter et ::first-line respectivement).

Valeur

Une chaîne de caractères ou null.

Exceptions

SyntaxError DOMException: Erreur levée lors d'une tentative de définir cette propriété sur un élément, ou sur un pseudo-élément invalide (inexistant ou mal orthographié). La propriété reste alors inchangée.

Exemples

html

<div id="monTexte">Du texte</div>
<pre id="journal"></pre>

css

#monTexte::after {
  content: "👹";
  display: inline-block; /* Nécessaire car la propriété `transform` ne
                            s'applique pas aux éléments inline */
  font-size: 2rem;
}
#monTexte::before {
  content: "🤠";
  display: inline-block;
  font-size: 2rem;
}

const journal = document.getElementById("journal");
const monTexte = document.getElementById("monTexte");

// Crée l'animation
const animation = monTexte.animate([{ transform: "rotate(360deg)" }], {
  duration: 3000,
  iterations: Infinity,
  pseudoElement: "::after",
});

// Lit la valeur de KeyframeEffect.pseudoElement
function logPseudoElement() {
  const keyframeEffect = animation.effect;
  journal.textContent = `Valeur du pseudoElement animé : ${keyframeEffect.pseudoElement}`;
  requestAnimationFrame(logPseudoElement);
}

// Toutes les 6 secondes, bascule le pseudo-élément animé actif
function switchPseudoElement() {
  const keyframeEffect = animation.effect;
  keyframeEffect.pseudoElement =
    keyframeEffect.pseudoElement === "::after" ? "::before" : "::after";
  setTimeout(switchPseudoElement, 6000);
}

switchPseudoElement();
logPseudoElement();

Spécifications

Specification
Web Animations # dom-keyframeeffect-pseudoelement

Compatibilité des navigateurs

Voir aussi

L'API Web Animations
L'interface KeyframeEffect
Le constructeur KeyframeEffect()
La propriété target

Help improve MDN

Learn how to contribute

Cette page a été modifiée le ⁨17 sept. 2025⁩ par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content