アニメーションを停止し、ホバー上で遷移を開始します

Question

背景色のある無限のアニメーションを実行しているリンクがあります。私は、アニメーションを停止し、ホバー上の異なる背景色に移行したいと思います。

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

Answer 1

Try -webkit-animation: 0;。 Demo here。 0は、animationのデフォルト値、または既存のCSS3アニメーションを無効にするために設定する必要があるものです。

Answer 2

これを実現する別の方法が見つかりました。

別のアニメーションキーフレームシーケンスを書き込んで、ホバー上で呼び出します。

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

Answer 3

-webkit-アニメーションプレイ状態： と -webkit-アニメーションプレイ状態を一時停止：

Answer 4

を実行している私は同じ問題を持っていると私が見つけた解決策は以下のとおりです。

あなたが望むアニメーションを作成し、あなたとあなたのそれぞれの要素にそれぞれ異なるクラスを割り当てます。

次に、.mouseover()または.mouseenter() jQueryイベントを使用して、各アニメーションに割り当てたクラスを切り替えます。

これはハンガーメニューに使用するものと似ていますが、ハンドラが異なるだけです。