未访问链接上的 css 动画答案

【问题标题】：css animation on unvisited links未访问链接上的 css 动画
【发布时间】：2014-08-06 18:14:09
【问题描述】：

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

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

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

【问题讨论】：

你到底想做什么？您拥有的代码（在您的小提琴中）将导致所有链接每 4 秒闪烁一次蓝色。根据您的最终目标，使用 CSS3 过渡效果可能会更好。
等等，你是不是想用 Javascript 来查明用户是否访问过这个链接？这被认为是一种安全风险（它允许网站了解其用户的浏览习惯）并且是不允许的。见this blog
@BrandonGano 是的。我只想闪烁未访问的链接。
@Jayen 你错过了博客的重要部分。它说，“我们正在限制可以对访问过的链接进行哪些类型的样式设置，以将它们与未访问过的链接区分开来。 访问过的链接只能在颜色上有所不同： 前景、背景、轮廓、边框、SVG 描边和填充颜色”（强调我的）。换句话说，要回答您的问题，是的，这是浏览器限制。作为安慰奖，我赞成你的问题。
顺便说一句，如果这是可能的，那将是一个隐私问题。动画正在生成 JS 事件（例如animationstart）。通过捕捉这些事件，网站将能够嗅探用户的浏览历史。与此事件类似的东西：blog.mozilla.org/security/2010/03/31/….

标签： html css google-chrome firefox

【解决方案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;
}

【讨论】：