在CSS3中应用动画？

Question

我昨天刚遇到animate.css ，想将其应用到我的网站。 但是问题是它只能工作一次，无论我将鼠标悬停在div上多少次，它都保持不变！ 也许我不太了解编码技术。 这是我的代码：

    window.setTimeout( function(){
   $('#test').removeClass('animated bounce')},
1300);

$(function(){
    $('#test').hover(function(){
            $('#test').addClass('animated bounce');

    });
});

感谢所有建议！

Answer 1

尝试这个

$('#test').hover(function(){
    $(this).addClass('animated bounce');

}, function(){
    $(this).removeClass('animated-bounce');
});

甚至更好

  $('#test').hover(function(){
     $(this).addClass('animated-bounce');
  });

  var element = document.getElementById('test');
  element.addEventListener("webkitAnimationEnd", function(){
    $(element).removeClass('animated-bounce');
  }, false);

其实。

为什么不只使用CSS

#test:hover{
   animation: animateName ....;
}

您遇到的问题是，当您添加类时，动画会起作用，但是当您再次悬停时，它不会再添加类，因为它已经存在，因此CSS不知道您何时将其悬停而无需更改类名称。

链接到动画事件DOCS

AnimationEnd演示

CSS：悬停演示