停止动画并在悬停时启动转换

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

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

来源

2013-04-12 Sidharth Raja

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

来源

2013-04-12 04:24:38 Rishabh

在这种情况下，悬停时没有动画 – Novelist

OP想要停止动画并将其转换为**不同的背景颜色，这正是我的测试用例所完成的功能:)它将转换为绿色！ – Rishabh

对不起。 0.2秒太少了:)我已经尝试在你的演示中设置为1秒，是的，它有一个动画 – Novelist

找到另一种方式来实现这一点。

编写另一个动画关键帧序列并在您的悬停上调用它。

.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; 
}

来源

2013-04-12 04:28:33 Neeraj

-webkit-动画播放状态：暂停和 -webkit-动画播放状态：运行

来源

2014-02-07 19:23:12 arturmoroz

感谢您的尝试，但不回答问题。悬停时，我们希望*从当前动画状态转换到其他状态。 – colllin

我有同样的问题，我找到了解决办法如下。

创建你想要的动画，并为每个元素指定一个不同的类。

然后使用.mouseover()或.mouseenter() jQuery事件在您分配给每个动画的类之间切换。

它与您使用的汉堡菜单类似，只是使用不同的处理程序。

来源

2016-04-05 00:03:33

停止动画并在悬停时启动转换

回答

相关问题