アイコンの上にカーソルを置いたときにボタンの文字がぼやける

Question

私は、紙面上にホバーしたときにアイコンのアイコンを揺らしました。しかし、下のボタンのテキストも少しぼやけています。アニメーションを削除しようとしましたが、アイコンの上にカーソルを置いたときにテキストがぼやけています（何もしないアイコンにもかかわらず）。アニメーションの

CSS：

.fa-shake { 
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both; 
    transform: translate3d(0, 0, 0); 
    backface-visibility: hidden; 
    perspective: 1000px; 
} 

@keyframes shake { 
    10%, 90% { 
    transform: translate3d(-1px, 0, 0); 
    } 

    20%, 80% { 
    transform: translate3d(2px, 0, 0); 
    } 

    30%, 50%, 70% { 
    transform: translate3d(-4px, 0, 0); 
    } 

    40%, 60% { 
    transform: translate3d(4px, 0, 0); 
    } 
} 

のjQuery：

$('.plane').hover(function() { 
    $(this).addClass('fa-shake'); 
}, function() { 
    $(this).removeClass('fa-shake'); 
}); 

Full code必要に応じて。

Answer 1

私はアイコンに振りを加えています.DIV全体ではありません。

$('.plane').hover(function() { 
    $(this).find('i').addClass('fa-shake'); 
}, function() { 
    $(this).find('i').removeClass('fa-shake'); 
}); 

これは、問題を解決するよう - Codepen