ホバリング時に開始されたスピンアニメーションは、ホバーオフ時にも完了します

Question

これで、コンテナをホバーすると内側の要素を回転させる簡単なコードが完成しました。

これは、マウスがコンテナ上にマウスを乗せたときと同じように機能しますが、マウスがコンテナ内になくなってもスピンが停止します。

マウスをコンテナから離してもスピンを完了させるマウスのホバーによって開始され、完全にスピンローテーションを完了するにはどうすればいいですか？

現在のコード：

HTML

@keyframes spin { 
 
    0% { transform: rotate(0deg); } 
 
    25% { transform: rotate(-90deg); } 
 
    50%{ transform: rotate(-180deg); } 
 
    75% { transform: rotate(-270deg); } 
 
    100% { transform: rotate(-360deg); } 
 
} 
 

 
.logo:hover > .spin{ 
 
    animation: spin 450ms; 
 
} 
 

 
.logo{ 
 
    background: #eee; 
 
    width: 100px; 
 
    height: 100px; 
 
    text-align: center; 
 
    line-height: 110px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<a href="#"> 
 
    <div class="logo"> 
 
    <i class="fa fa-globe fa-2x spin" aria-hidden="true"></i> 
 
    </div> 
 
</a>

Answer 1

これは動作するはずです！ :)

jQuery(document).ready(function(){ 
 
jQuery(".logo").hover(function(){ 
 
    var logo = jQuery(this); 
 
    if(!logo.hasClass('hover')){ 
 
    logo.addClass('hover'); 
 
    setTimeout(function(){ 
 
     logo.removeClass('hover'); 
 
    }, 450); 
 
    } 
 
}, function(){}); 
 
});

@keyframes spin { 
 
    0% { transform: rotate(0deg); } 
 
    25% { transform: rotate(-90deg); } 
 
    50%{ transform: rotate(-180deg); } 
 
    75% { transform: rotate(-270deg); } 
 
    100% { transform: rotate(-360deg); } 
 
} 
 

 
.logo.hover > .spin{ 
 
    animation: spin 450ms; 
 
} 
 

 
.logo{ 
 
    background: #eee; 
 
    width: 100px; 
 
    height: 100px; 
 
    text-align: center; 
 
    li

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<a href="#"> 
 
    <div class="logo"> 
 
    <i class="fa fa-globe fa-2x spin" aria-hidden="true"></i> 
 
    </div> 
 
</a>