使用 JQuery 悬停触发 CSS3 动画不起作用答案

【问题标题】：Triggering CSS3 animation with JQuery hover not working使用 JQuery 悬停触发 CSS3 动画不起作用
【发布时间】：2012-08-31 19:32:17
【问题描述】：

我正在尝试使用 CSS3 和 Jquery 让一些图标在悬停时跳转。弹跳动画附加到样式表中的.bounce 类；为了处理悬停，我告诉 Jquery 在鼠标分别进入和离开图像的父元素时添加和删除 bounce 类。虽然 Jquery 按预期工作，但动画却没有，我不知道为什么。

Here's the fiddle.感谢您的帮助。

【问题讨论】：

如果您想了解更多：stackoverflow.com/questions/12062818/…

标签： jquery animation css

【解决方案1】：

你错过了动画持续时间：

.bounce {    
    // this is the shorthand definition
    -webkit-animation: bounce 1s ease infinite;
    -moz-animation: bounce 1s ease infinite;
    -o-animation: bounce 1s ease infinite;
    animation: bounce 1s ease infinite;
}

http://jsfiddle.net/fyTpV/2/

【讨论】：

我认为他正在使用其他人的 css。 Animated 类中有这些值。只需将其放在元素上即可制作动画。
做到了！非常感谢。我假设为我生成的 css 表已经内置了时间。我以前从未使用过 CSS3 动画，所以我什至没有想过要检查它。

【解决方案2】：

您需要添加动画类。这是更新后的小提琴http://jsfiddle.net/fyTpV/3/ 将类添加到您想要动画的元素中，或者在您的添加类中添加动画类。

【讨论】：