css - 已访问的链接在 Chrome 中丢失 CSS 颜色动画

Question

我正在尝试为链接设置彩色动画。在 Chrome 中访问链接后，将不再应用彩色动画。其他动画样式(我测试了背景颜色、字体粗细和字体大小)和其他浏览器(Firefox、Safari、IE11)都不是这种情况。

这是一个演示:

http://codepen.io/benjarwar/pen/rVJbeR
http://s.codepen.io/benjarwar/debug/rVJbeR

HTML:

<a href='#' target='_blank' class='color'>Color Animation</a>

CSS:

a.color,
a.color:visited {
  -moz-animation: color-animation 1s ease-in-out infinite;
  -webkit-animation: color-animation 1s ease-in-out infinite;
  animation: color-animation 1s ease-in-out infinite;
}

@-moz-keyframes color-animation {
  0% { color: #f00; }
  50% { color: #fc0; }
  100% { color: #f00; }
}

@-webkit-keyframes color-animation {
  0% { color: #f00; }
  50% { color: #fc0; }
  100% { color: #f00; }
}

@keyframes color-animation {
  0% { color: #f00; }
  50% { color: #fc0; }
  100% { color: #f00; }
}

重现步骤:

1. 访问上面的链接
2. 注意链接有不同的动画
3. 单击其中一个链接(全部指向 href="#")
4. 请注意，彩色动画链接不再是动画
5. 从您的浏览器历史记录中删除链接并刷新
6. 请注意，一旦从历史记录中删除链接，动画就会返回

在 Mac OS 10.9.5 上使用 Chrome 版本 43.0.2357.130

Answer 1

我认为这与过去的一些一般安全/隐私问题有关:

We’re limiting the CSS properties that can be used to style visited links to color, background-color, border-*-color, and outline-color and the color parts of the fill and stroke properties.

https://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/ https://blog.mozilla.org/security/2010/03/31/plugging-the-css-history-leak/