在css3中应用动画？答案

【问题标题】：Apply animation in css3?在css3中应用动画？
【发布时间】：2013-07-12 00:30:21
【问题描述】：

我昨天刚遇到animate.css，想把它应用到我的网站上。但问题是它只工作了一次，无论我在 div 上悬停多少次，它都保持不变！也许我没有正确掌握编码技术。这是我的代码：

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

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

    });
});

感谢所有建议！

【问题讨论】：

标签： javascript css animation jquery-animate

【解决方案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

【讨论】：

我不太清楚为什么最后两种方法更好！因为唯一有效的是第一个^_^。非常感谢！
就我而言，只有第一个有效！（也许其他脚本和代码会以某种方式进行干预！）
我忘了。但AnimationEnd 需要加上前缀。我已经在他们的底部添加了演示