在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：懸停演示