CSS3 color transition not working in Chrome

Question

The links in the left menu in this website have a CSS3 transition property of the color, which changes on mouse hover. It\'s not working in Chrome 16 or 17 (the

Answer 1

As Darren Kovalchik wrote in his asnwer ( https://stackoverflow.com/a/8524199/1010777 ), the Chrome has a bug on this.

A possible workaround is to apply color animation on the parent element of the link, and set the link's color to inherit. In this case the animation works well even if the link is :visited.

html:

    whateverLinkText

css:

.whateverLinkParent { animation: whateverTextColorAnimation 1s infinite; }
.whateverLinkParent a { color: inherit; }
@keyframes whateverTextColorAnimation {
    0%, 100% { color: #686765; }
    50% { color: #2E2D2B; }
}

Of course this workaround can't work if setting the link's parent's color is a problem, but in every other cases it gives an easy and clean solution.