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

Question

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

.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-play-state: paused;
    background-color: #014a2a;
}

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

为什么这段代码不起作用？还有其他方法可以完成这项工作吗？ (最好没有 Javascript)。

Answer 1

试试 -webkit-animation: 0;。 Demo here . 0 是 animation 的默认值，或者您必须设置以禁用任何现有的 CSS3 动画。