为啥我的链接颜色关键帧动画在 Chrome 中不起作用？

Posted 2023-03-06

【中文标题】为啥我的链接颜色关键帧动画在 Chrome 中不起作用？

【英文标题】：Why doesn't my keyframe animation for link color work in Chrome?为什么我的链接颜色关键帧动画在 Chrome 中不起作用？

【发布时间】：2015-09-08 06:11:06

【问题描述】：

使用 @keyframes（和 animation）为 a 颜色设置动画在 Chrome 中不起作用。

演示：https://jsfiddle.net/ed3pypwr/ 在 Chrome 中，链接保持蓝色。在 Firefox 中，它按预期从红色变为绿色。在 div 上，它在 Chrome 中也能正常工作。

有没有办法解决这个问题？

编辑 我知道它应该以-webkit- 为前缀以确保最大的兼容性，但这不是这里的问题。无论如何它都不起作用。

编辑 2 一种解决方案是将链接放在包装器中并使用currentColor:https://jsfiddle.net/b84gttu6/。有没有更好的办法？

【问题讨论】：

color:inherit 也可以正常工作

@RonaldUlyssesSwanson 是的，但无论如何我宁愿找到另一种方法。

【参考方案1】：

Chrome 的旧版本 (@-webkit-keyframes 而不是标准的 @keyframes。所以完全支持看起来像这样：

@-webkit-keyframes test

   from  color: red; 
   to  color: green; 

@keyframes test

   from  color: red; 
   to  color: green; 

更新：

我一直在使用各种不同的方法进行一些测试，并且只有在链接未被访问时才有效（为什么，我不知道）。

Example

【讨论】：

同时使用支持所有主流浏览器！

好吧，如果您不想为所有内容添加前缀，您应该查看 CSS 编译器，我认为 Chrome 只是最近才添加了对无前缀版本的支持，而且没有很多人使用最新的 Chrome .看这里：caniuse.com/#search=css-animation

只有 Chrome 43 及更高版本支持不带前缀的动画

我一直直言 Chrome 在这些方面是多么落后，但最新的稳定版本 确实 支持不带前缀的功能这一事实充其量是不准确的，而且在最坏的情况下无关紧要。最新的稳定版本确实显示了所描述的问题（并且考虑到 Chrome 比 任何人 完善自己的功能要长得多，这对 Chrome 的情况没有一点帮助 - 总共 8 年 - 如果结果是回归，那就更糟了。

"只有在链接未被访问时才有效" 在这种情况下，很可能是 Chrome 对整个 :visited 隐私的事情有点过分热心。不幸的是，除了“UA 可以做他们认为对隐私最有利的事情”之外，这些东西并没有被详细说明。但是，使用 OP 现在提供的 currentColor 解决方法让 Chrome 变得更加明智。