Reputation: 101
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
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