Применить анимацию в 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