Stop animation and start transition on hover

Found another way round to achieve this.

Write another animation keyframe sequence and call it on your 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:hoverColor infinite;
}

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

-webkit-animation-play-state: paused and -webkit-animation-play-state: running

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

I have the same issue and the solution I found is the following.

Create the animation you want and for the element you and to each assign each one a different class.

Then use .mouseover() or .mouseenter() jQuery events toggle between the classes you assigned to each animation.

It is similar to what you use for a burger menu, just with a different handler.