Css animation on independent links
I can apply css color for invisible links, but I can't seem to be able to do it for css animations, at least in Firefox and Chrome. Am I doing something wrong or is this a browser limitation? The example below has animated visited and invisible links.
@keyframes highlight {
0% {
background: #38c;
}
10% {
background: none;
}
}
a:link {
color: red;
animation: highlight 4s infinite;
}
EDIT: Based on Mister Lister's comment, I tried to set only the color and put the animation in the parent. Works for color but not background color (Firefox 31): http://jsfiddle.net/n8F9U/95/
+3
source to share
1 answer
I couldn't get it background-color
to work, but you can do it with border-color
and color
:
@keyframes highlight {
0% {
color: #38c;
}
10% {
color: red;
}
100% {
color: red;
}
}
a:visited {
color: green;
border-style: solid;
}
a:link {
color: inherit;
border-style: solid;
}
.wrapper {
animation: highlight 4s infinite;
}
+1
source to share