Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why doesn't my keyframe animation for link color work in Chrome?

Using @keyframes (and animation) to animate a color does not work in Chrome.

Demo: https://jsfiddle.net/ed3pypwr/
In Chrome the link stays blue. In Firefox it goes from red to green as expected. On a div it works fine in Chrome as well.

Is there any way to solve this?

EDIT
I know it should be prefixed with -webkit- to ensure maximum compatibility, but this is not the issue here. It does not work anyway.

EDIT 2
A solution would be to put the link in a wrapper and use currentColor: https://jsfiddle.net/b84gttu6/. Is there a better way ?

like image 242
Bali Balo Avatar asked Jun 22 '15 17:06

Bali Balo


1 Answers

Old versions (<43) of Chrome use the prefixed @-webkit-keyframes instead of the standard @keyframes. So full support would look like this:

@-webkit-keyframes test
{
   from { color: red; }
   to { color: green; }
}
@keyframes test
{
   from { color: red; }
   to { color: green; }
}

Update:

I've been doing some tests with various different methods and it works only if the link has not been visited (why, I don't know).

Example

like image 173
imtheman Avatar answered Nov 10 '22 16:11

imtheman