[Résolu] @keyframes ne s'execute pas

Horetol

9 Dec 2025 à 19:39

Bonsoir,
Dans une page html, j'ai après le <head> mais avant <body> une déclaration de styles :
<html>
<head>
<style>

@keyframes couleurTexte {
    0% {
        color: rgb(255, 0, 0); /* Rouge */
    }
    50% {
        color: rgb(255, 255, 255); /* Blanc */
    }
    100% {
        color: rgb(255, 0, 0); /* Retour au Rouge */
    }
}
.text-animation {
   animation: couleurTexte 5s infinite; 
}
.textebas, .textebas p {
    font-family:Arial, Helvetica, sans-serif;
    font-weight: normal; 
   margin-top: 0.8rem;
}

</style>
<body>

<div class="text-animation textebas">
            Pour voir <i>en musique</i>, les peintures récentes de ce peintre, cliquez sur le lien ci-dessous.<br />
            <a href="#URL_RUBRIQUE{92}"> CALENDRIERS : LES COULEURS DE LA LUMI&Egrave;RE </a>
       </div>
</body>
</html>

Mon texte s'affiche bien avec le style de .textebas, mais le @keyframes couleurTextede ne fonctionne pas.

Bongota

9 Dec 2025 à 22:26

Salut,
j'ai copié ton code tel que tu l'as donné dans une page d'essais. Il fonctionne, le texte apparaît et disparaît en rouge, à la vitesse donnée dans le keyframe.
Sans doute dans ton code complet il y a une accolade en trop ou en moins qui perturbe. Smiley hum

drphilgood

10 Dec 2025 à 09:58

salut
curieux endroit pour mettre du css !

Raphael

Administrateur

10 Dec 2025 à 10:13

drphilgood a écrit :
salut
curieux endroit pour mettre du css !

Ah oui en effet "après le <head> mais avant <body>" n'est pas un emplacement indiqué pour les styles. Il est possible ce ce soit la source du problème !

Bongota

10 Dec 2025 à 14:55

Quand j'ai copié son code sur une page de test, je n'ai évidemment pas commis cette erreur. D'où sans doute le problème.

Horetol

10 Dec 2025 à 17:27

Merci pour vos réponses. J'ai pu résoudre le souci. Mise en place d'un fichier css spécifique appelé dans le head. Et suppression d'un " en trop ailleurs dans le gabarit.