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

重现的步骤：

访问上面的链接
请注意链接具有不同的动画
单击其中一个链接（均指向href =“＃”）
请注意，颜色动画链接不再是动画
从浏览器历史记录中删除链接并刷新
请注意，一旦从历史记录中删除了链接，动画就会返回

在Mac OS 10.9.5上使用Chrome版本43.0.2357.130

Answer 1

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

我们限制了可用于访问样式的CSS属性指向颜色，背景颜色，边框 - * - 颜色和轮廓颜色的链接以及填充和描边属性的颜色部分。

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/

Answer 2

您之前可能已经使用过动画，但现在大多数浏览器限制在访问时使用css样式。只有属性允许

颜色
背景颜色
边界 - * - 色
outline-color和
填充和描边属性的颜色部分。

source

<强> WHY

之前的人们曾经使用过访问过的黑客来查找您访问过的网站。

http://dbaron.org/mozilla/visited-privacy

访问过的链接会丢失Chrome中的CSS颜色动画

2 个答案: