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

【问题标题】：How can I make a link color not override an animation text color如何使链接颜色不覆盖动画文本颜色
【发布时间】：2018-03-21 19:09:31
【问题描述】：

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

我应该在我的代码中实现什么以使动画在 Edge 上可点击？不过，它适用于 Google Chrome 和 Firefox。

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

div.coupon {
  height: 30%;
  width: 40%;
  background-color: teal;
  border-radius: 3px;
  margin-left: 3%;
  padding: 0% 2%;
}
.animation { 
  -webkit-animation-name: animation; 		
  -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>

【问题讨论】：

标签： html css animation text colors

【解决方案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;
}

【讨论】：