10

我正在尝试在链接上设置彩色动画。在 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

4

2 回答 2

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历史泄漏/

于 2015-11-10T19:38:32.623 回答
1

你本可以更早使用动画，但现在大多数浏览器都限制在访问时使用 css 样式。只有属性允许是

  1. 颜色
  2. 背景颜色
  3. 边框颜色
  4. 轮廓颜色和
  5. 填充和描边属性的颜色部分。

资源

为什么

早期的人们过去常常使用访问过的黑客来找出您访问过的网站。

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

于 2016-04-06T07:09:01.360 回答