Comment faire pour que la couleur d'un lien ne remplace pas la couleur d'un texte d'animation

Question

Je suis en train de créer une simple animation de texte. L'animation est censée être un morceau de texte cliquable qui change de couleur. Toutefois, sur Microsoft Edge lorsque le lien est déjà visité, l'animation reste violet/bleu sans aucun style.

Que devrais-je implémenter dans mon code pour que l'animation soit cliquable sur Edge? Cela fonctionne sur Google Chrome et Firefox, cependant.

S'IL VOUS PLAÎT NOTE que le lien est VISITER Dans ce cas

div.coupon { 
 
    height: 30%; 
 
    width: 40%; 
 
    background-color: teal; 
 
    border-radius: 3px; 
 
    margin-left: 3%; 
 
    padding: 0% 2%; 
 
} 
 
.animation { 
 
    -webkit-animation-name: animation; \t \t 
 
    -webkit-animation-duration: 3s; 
 
    -webkit-animation-iteration-count: infinite; 
 
    animation-name: animation; 
 
    animation-duration: 3s; 
 
    animation-iteration-count: infinite; 
 
} 
 
@-webkit-keyframes animation { 
 
    0% {color: blue;} 
 
    33% {color: green;} 
 
    67% {color: red;} 
 
    100% {color: blue;} 
 
} 
 
@keyframes animation { 
 
    0% {color: blue;} 
 
    33% {color: green;} 
 
    67% {color: red;} 
 
    100% {color: blue;} 
 
} 
 
a.signup { 
 
    text-decoration: none; 
 
}

<div class="coupon"> 
 
    <a href="signup.html" class="signup"><p class="animation">Click on this link to get yourself a free drink on us!</p></a> 
 
</div>

Answer 1

Je pense que vous avez juste à remplacer le CSS. Pour l'animation, vous devez utiliser un sélecteur CSS spécifique.

.signup:visited .animation { 
    -webkit-animation-name: animation;  
    -webkit-animation-duration: 3s; 
    -webkit-animation-iteration-count: infinite; 
    animation-name: animation; 
    animation-duration: 3s; 
    animation-iteration-count: infinite; 
}