未访问链接上的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;
}