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

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

回答1:

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

回答2:

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

回答3:

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

回答4:

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.

文章来源: Stop animation and start transition on hover