为什么我的关键帧动画无法在Chrome中使用链接颜色？ [英] Why doesn't my keyframe animation for link color work in Chrome?

问题描述

使用 @keyframes （和动画）动画 a color does not work in Chrome。

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

演示： https://jsfiddle.net / ed3pypwr /

在Chrome中，链接保持蓝色。在Firefox中，它按预期从红色变为绿色。

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

我知道它应该以 -webkit - 以确保最大的兼容性，但这不是这里的问题。

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.

编辑2

解决方案是将链接放在包装器中并使用 currentColor ： https://jsfiddle.net/b84gttu6/ 。

推荐答案

旧版本（< 43）的Chrome使用前缀 @ -webkit-keyframes 而不是标准 @keyframes 。因此，完全支持将如下所示：

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

更新：

我已经用各种不同的方法做了一些测试，只有当链接没有被访问（为什么，我不知道）工作。

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

示例

这篇关于为什么我的关键帧动画无法在Chrome中使用链接颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！