KeyframeEffect : la propriété pseudoElement

Baseline Large disponibilité

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).

Dans cet article

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;
}

js
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();

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

Aider à améliorer MDN

Cette page vous a-t-elle été utile ?

Oui Non

Apprendre à contribuer

Cette page a été modifiée le 17 sept. 2025 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu

Web Animations API
KeyframeEffect
Constructeur
1. KeyframeEffect()
Propriétés d'instance
Méthodes d'instance
1. getKeyframes()
2. setKeyframes()
Héritage
1. AnimationEffect
Pages liées à Web Animations
Guides
1. Utilisation de l'API Web Animations
2. Web Animations API Concepts
3. Keyframe Formats
4. Trucs et astuces pour les animations CSS

KeyframeEffect : la propriété pseudoElement

Dans cet article

Valeur

Exceptions

Exemples

Spécifications

Compatibilité des navigateurs

Voir aussi

Aider à améliorer MDN