停止动画，并在悬停时开始转换 [英] Stop animation and start transition on hover

问题描述

我有一个链接，运行一个无限的动画与背景颜色。

I have a link that's running an infinite animation with the background color. I want to stop the animation and transition into a different background color on hover.

.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）。

Why is this code not working? And is there an alternate way to get this done? (preferably without Javascript).

推荐答案

尝试 -webkit-animation：0; 。 此处演示。 0 是 animation 的默认值，或者您必须设置为禁用任何现有的CSS3动画。

Try -webkit-animation: 0;. Demo here. 0 is the default value for animation or what you must set to disable any existing CSS3 animations.

这篇关于停止动画，并在悬停时开始转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！