Css 停止动画并在悬停时开始过渡

我有一个链接正在运行一个带有背景色的无限动画。我想停止动画并在悬停时转换为不同的背景色

.link{
背景色：#206a9e；
颜色：#fff；
边界半径：15px；
字体系列：“Myriad Pro”；
-webkit动画：changeColor 3.4s无限；
-webkit过渡：所有0.2s易用性；
}
.悬停{
-webkit动画播放状态：暂停；
背景色：#014a2a；
}
@-webkit关键帧更改颜色
{
0%{背景：#206a9e；}
50%{背景：#012c4a；}
100%{背景：#206a9e；}
}

---

为什么这个代码不起作用？有没有其他方法可以完成这项工作？（最好不使用Javascript）。

尝试

-webkit动画：0
0
是
动画的默认值，或者您必须设置它来禁用任何现有的CSS3动画。
找到了另一种方法来实现这一点

编写另一个动画关键帧序列，并在悬停时调用它

.startlink{
background-color:#206a9e;
color:#fff;
border-radius:15px;
font-family: 'Myriad Pro';
-webkit-animation:changeColor 3.4s infinite;
-webkit-transition:all 0.2s ease-in;
}

.startlink:hover{
-webkit-animation:hoverColor infinite;
}

@-webkit-keyframes changeColor 
{
0%   {background:#206a9e;}
50%  {background:#012c4a;}
100%   {background:#206a9e;}
}
@-webkit-keyframes hoverColor 
{
background: #014a2a;
}

-webkit动画播放状态：暂停
和
-webkit动画播放状态：正在运行
我遇到了相同的问题，我找到的解决方案如下

创建所需的动画，并为每个元素指定不同的类

然后使用或jQuery事件在指定给每个动画的类之间切换

它与汉堡菜单相似，只是使用了不同的处理程序
 对于那些对动画幻灯片感兴趣的人，请在两张图像之间停止播放


var NumImg=1//要显示的Img编号
var最大值=3//目录中有多少Img（名为1.jpg，2.jpg…）
函数（）{
NumImg=NumImg>最大值？1:NumImg+=1；
var MyImage=”http://startinbio.com/Lib/Images/Fond/“+NumImg+”.jpg”；
$（“ImgFond1”）.attr（“src”，MyImage）；
$（“#ImgFond2”）.fadeOut（3000，函数（）{
$（“ImgFond2”）.attr（“src”，MyImage）；
$（“#ImgFond2”）。法登（1）；
});
}
设置间隔（“AnimFond（）”，10000）//两个img之间的延迟
#{
位置：固定；
身高：100%；
宽度：100%；
利润率：0-8；
}
#阿尼姆{
位置：绝对位置；
左：0；
身高：100%；
宽度：100%；
}
我试图实现同样的目标，在尝试动态更改关键帧之后，我通过使用基本css找到了一个奇怪的解决方案，请参见此处。它不是很优雅，但正是我（我希望你）想要的


#菜单，#黄色{
位置：固定；
顶部：2.5vw；
右：2.5%；
高度：25px；
宽度：25px；
边界半径：30px；
}
#菜单{
动画：闪烁2s无限；
过渡：1s；
}
@关键帧闪烁{
0%{背景色：灰色；}
50%{背景色：黑色；}
100%{背景色：灰色；}
}
#黄色的{
背景色：rgba（255,0,0,0）；
过渡：1s；
}
#题目：悬停黄色{
指针事件：无；
背景色：rgba（255,0,0,1）；
}
#主题：悬停菜单{
不透明度：0；
}

在本例中，hoverOP上没有动画，希望停止动画并将其转换为不同的背景色，这正是我的测试用例所做的：）它将转换为绿色！我很抱歉。0.2秒太少了：）我试着在你的演示中设置为1秒，是的，它有一个动画，看起来不再在Chrome中过渡。（2014年5月）浏览器错误？还是标准有变化？（2020年9月）Chrome 85。过渡时间似乎仍然不起作用。谢谢你的尝试，但没有回答问题。悬停时，我们希望从当前动画状态过渡到其他状态。