Animate.cssがホバリングで動作しない

Question

初期ページの読み込みアニメーションの後にAnimate.cssアニメーションが機能しないのはなぜですか？

$(document).ready(function(){ 

$("h1").addClass("animated zoomInDown") 

$("h1").hover(function(){ 
$(this).addClass('animated shake'); 

}); 

Answer 1

あなたがhover()を使用している場合は、あなたがホバーインとホバーアウトイベントの両方のハンドラを持っていることを確認してください。 CSSアニメーションは、それが削除されます場合にのみ再実行し、再度追加します：。

$(document).ready(function() { 
 

 
    $("h1").addClass("animated zoomInDown") 
 

 
    $("h1").hover(function() { 
 
    $(this).addClass('animated shake'); 
 
    }, function() { 
 
    $(this).removeClass('animated shake'); 
 
    }); 
 
});

h1 { 
 
    background: yellow; 
 
    position: relative; 
 
} 
 

 
.animated { 
 
    animation: animate-color 0.2s linear; 
 
    animation-iteration-count: 5; 
 
} 
 

 
@keyframes animate-color { 
 
    0% { 
 
    left: 0; 
 
    } 
 
    50% { 
 
    left: 5px; 
 
    background: red; 
 
    } 
 
    100% { 
 
    left: 0px; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1>Hello</h1>