为什么链接颜色的关键帧动画不适用于Chrome?

时间:2015-06-22 17:12:34

标签: html css css3 google-chrome css-animations

使用@keyframes(以及animation)为a颜色设置动画在Chrome中不起作用。

演示:https://jsfiddle.net/ed3pypwr/
在Chrome中,链接保持蓝色。在Firefox中,它按照预期从红色变为绿色。在div上,它在Chrome中运行良好。

有什么方法可以解决这个问题吗?

修改
我知道它应该以{{1​​}}为前缀以确保最大兼容性,但这不是问题。它无论如何都不起作用。

编辑2
解决方案是将链接放在包装器中并使用-webkit-https://jsfiddle.net/b84gttu6/。还有更好的方法吗?

1 个答案:

答案 0 :(得分:4)

Chrome的旧版本(< 43)使用带前缀的@-webkit-keyframes代替标准@keyframes。所以完全支持看起来像这样:

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

<强>更新

我一直在用各种不同的方法进行一些测试,只有在没有访问链接的情况下它才有用(为什么,我不知道)。

Example