我正在尝试为链接设置彩色动画。在 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
最佳答案
我认为这与过去的一些一般安全/隐私问题有关:
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/
关于css - 已访问的链接在 Chrome 中丢失 CSS 颜色动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31212569/