css – 停止动画并开始转换悬停

前端之家收集整理的这篇文章主要介绍了css – 停止动画并开始转换悬停前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个链接,运行无限动画与背景颜色.我想停止动画,并在悬停时转换为不同的背景颜色.
.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).

解决方法

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

猜你在找的CSS相关文章