我如何使链接颜色不覆盖动画文本颜色

Question

我正在构建一个简单的文本动画。据推测，该动画是可改变颜色的可点击的文本片段。但是，在Microsoft Edge上，当链接已经被访问时，动画将保持紫色/蓝色，而没有任何样式。

我应该在我的代码中实现动画在Edge上可点击的位置？不过，它可以在谷歌浏览器和火狐浏览器上运行。

请注意，该链接被访问发生这种情况时

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

我认为你只需要重写CSS。 对于动画你应该使用特定的CSS选择器。

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