html - 未访问链接上的CSS动画

Question

我可以将 css 颜色应用于未访问的链接，但我似乎无法对 css 动画这样做，至少在 Firefox 和 Chrome 中是这样。我做错了什么还是浏览器限制？在下面的示例中，已访问和未访问的链接是动画的。

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

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

编辑:根据 Lister 先生的评论，我尝试仅设置颜色并将动画放在父级中。适用于颜色，但不适用于背景颜色(Firefox 31):http://jsfiddle.net/n8F9U/95/

Answer 1

我无法让 background-color 工作，但你可以使用 border-color 和 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;
}