停止动画并在悬停时开始转换

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;.在这里演示.0是animation禁用任何现有CSS3动画的默认值或必须设置的值.

Answer 2

-webkit-animation-play-state：暂停和 -webkit-animation-play-state：运行