我如何使鏈接顏色不覆蓋動畫文本顏色

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