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 ?
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With