Animate.css not working on hover

Question

Why doesn't this hover Animate.css animation work after the initial page load animation?

$(document).ready(function(){

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

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

});

Answer 1

If you're using hover() make sure you have handlers for both hover-in and hover-out events. CSS animation will only re-run if it's removed then added again:

$(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>