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>