CODEWITHSUNDEEP
htmlcssgoogle-chromefirefox
Jayen
Jayen

Reputation: 6069

css animation on unvisited links

I can apply css color to unvisited links, but I seem unable to do so for css animations, at least in Firefox and Chrome. Am I doing something wrong or is this a browser limitation? In the example below, visited and unvisited links are animated.

http://jsfiddle.net/n8F9U/92/

@keyframes highlight {
    0% {
        background: #38c;
    }
    10% {
        background: none;
    }
}
a:link {
    color: red;
    animation: highlight 4s infinite;
}

EDIT: based on Mr Lister's comment, I tried setting the color only and putting the animation in the parent. Works for color, but not background-color (Firefox 31): http://jsfiddle.net/n8F9U/95/

Upvotes: 3

Views: 171

Answers (1)

Jayen
Jayen

Reputation: 6069

I couldn't get background-color to work, but you can do this with border-color and color:

http://jsfiddle.net/n8F9U/97/

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

Upvotes: 1

Related Questions