SkyjumperTalon
SkyjumperTalon

Reputation: 101

How can I make a link color not override an animation text color

I'm building a simple text animation. The animation is supposedly a clickable piece of text that changes color. However, on Microsoft Edge when the link is already visited then the animation will stay purple / blue without any styling.

What should I implement in my code to have the animation clickable on Edge? It works on Google Chrome and Firefox, though.

PLEASE NOTE THAT THE LINK IS VISITED WHEN THIS OCCURS

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>

Upvotes: 0

Views: 66

Answers (1)

Singularity-
Singularity-

Reputation: 80

I think you just have to override the CSS. For the animation you should use a specific CSS selector.

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

Upvotes: 0

Related Questions