在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不知道你什麼時候放過它而沒有改變類名。

Link to Animation Event DOCS

AnimationEnd Demo

CSS :hover Demo