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
SyntaxErrorDOMException-
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
<div id="monTexte">Du texte</div>
<pre id="journal"></pre>
#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