Visited links lose CSS color animation in Chrome

问题:

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).

Here's a demo:

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

Steps to reproduce:

1. Visit the link above
2. Note the links have different animations
3. Click one of the links (all point to href="#")
4. Note that the color animation link is no longer animating
5. Remove the link from your browser history and refresh
6. Note that the animation returns once the link is removed from the history

Using Chrome Version 43.0.2357.130 on Mac OS 10.9.5

回答1:

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

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/

回答2:

You could have used animation earlier but now most browsers restrict use of css style in visited. Only properties allow are

1. color
2. background-color
3. border-*-color
4. outline-color and the
5. color parts of the fill and stroke properties.

source

WHY

Earlier people used to use visited hack to find out what websites you visited.

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