访问过的链接失去在Chrome CSS彩动画 [英] Visited links lose CSS color animation in Chrome

问题描述

我想设置链接的颜色动画。一旦链接已经在Chrome中被访问，颜色动画不再适用。这不是其他动画风格（我测试过的背景颜色，字体粗细和字体大小），也没有在其他浏览器（Firefox，Safari浏览器，IE11）的情况下

I'm trying to set color animations on links. Once a link has been visited in Chrome, the color animation is no longer applied. This is not the case for other animated styles (I've tested background color, font weight, and font size) nor in other browsers (Firefox, Safari, IE11).

下面是一个演示：

的http：//$c$cpen.io/benjarwar/pen/rVJbeR 结果
的http：//s.$c$cpen.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

Using Chrome Version 43.0.2357.130 on Mac OS 10.9.5

推荐答案

我认为这是关系到在过去的一些常规的安全/隐私问题：

I think this is related to some general security/privacy issue in the past:

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

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 /隐私相关的改动，来对CSS-vistited /
https://blog.mozilla.org/安全/ 2010/03/31 /堵漏最CSS-历史泄漏/

这篇关于访问过的链接失去在Chrome CSS彩动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！