在css3中应用动画

Apply animation in css3?

本文关键字：动画 应用 css3      更新时间：2023-09-26

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

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

感谢所有的建议

尝试这个

$('#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

动画结束演示

CSS：悬停演示

相关文章：