CSSキーフレームアニメーション（ホバー上） - アニメーションマウス移動によるリセット

Question

ホバー上の単純なキーフレームアニメーションについては、以下のコードを参照してください。

.behind { 
 
    width: 200px; 
 
    height: 200px; 
 
    background: red; 
 
    position: absolute; 
 
} 
 

 
.infront { 
 
    width: 200px; 
 
    height: 200px; 
 
    background: blue; 
 
    position: absolute; 
 
} 
 

 
@keyframes fadeOutLeft { 
 
    from { 
 
    opacity: 1; 
 
    } 
 

 
    to { 
 
    opacity: 0; 
 
    transform: translate3d(-100%, 0, 0); 
 
    } 
 
} 
 

 
.infront:hover { 
 
    animation: fadeOutLeft 2s; 
 
}

<div class="behind"></div> 
 
<div class="infront"></div>

これは、少しでもマウスを移動するときただし、アニメーションが再起動されます、ホバー上で動作して見えました。

https://app.hyfy.io/v/ab7AjpMoXbU/

私は要素の上にマウスの動きにリセットからアニメーションを停止することができますどのような方法がありますが、まだアニメーション遊びを持っています。ここでは

は、私が説明しています問題の短いビデオですもう一度マウスを離して再入力したら？この特定のインスタンスではJavaScriptを使用できません。

事前にあなたの知恵をありがとうございます。

Answer 1

問題は、ホバーがinfront divに適用されているため、そのdivからカーソルを取り除くと停止することです。

.behind { 
 
    width: 200px; 
 
    height: 200px; 
 
    background: red; 
 
    position: absolute; 
 
} 
 

 
.infront { 
 
    width: 200px; 
 
    height: 200px; 
 
    background: blue; 
 
    position: absolute; 
 
} 
 

 
@keyframes fadeOutLeft { 
 
    from { 
 
    opacity: 1; 
 
    } 
 
    to { 
 
    opacity: 0; 
 
    transform: translate3d(-100%, 0, 0); 
 
    } 
 
} 
 

 
.wraper:hover .infront { 
 
    animation: fadeOutLeft 2s; 
 
}

<div class="wraper"> 
 
    <div class="behind"></div> 
 
    <div class="infront"></div> 
 
<div>

：

あなたは、コードスニペットを参照してくださいdivの内側に2つのdiv（インフロント/背後を）wrapingことによってそれを修正し、wraper

.wraper:hover .infront { 
    animation: fadeOutLeft 2s; 
} 

にホバーを呼び出すことができます