Triggering CSS3 animation with JQuery hover not working

综合技术 CSS3 Recipes (源链)

I’m trying to make some icons jump on hover using CSS3
and Jquery. The bounce animation is attached to the .bounce
class in a stylesheet; to handle the hover, I told Jquery to add and remove the bounce
class when the mouse enters and leaves the image’s parent element respectively. While the Jquery is working as expected, the animation is not, and I’m not sure why.

Here’s the fiddle.
I appreciate the help.

Problem courtesy of: ajw-art

Solution

You’re missing the animation-duration:

.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/

Solution courtesy of: Shmiddty

您可能感兴趣的

Transposing data using UNPIVOT A couple of years ago Iposted a method to remove nulls from a report using the Value Attribute Paris - Column template. Here's an example of ho...
vue-cli 自定义指令directive 添加验证滑块... gif截图软件帧数略低。。。。 vue项目注册登录页面遇到了一个需要滑块的功能,网上看了很多插件发现都不太好用,于是自己写了一个插件供大家参考; 用的是vue的自定义指令direcive,只需要在需要的组件里放入对应的标签嵌套即可; template: 1 2 ...
Has jQuery Become A Polyfill? Last week in thenewsletter, I mentioned a new release of jQuery 3.3.0 . In this release, a new feature was added: adding/removing/toggling clas...
JsPlumb and dynamically added containers Since there's no jsPlumb forum anywhere I hope someone here can help me. I want to generate this graph from some data I get from a JSON-API, what...
Managing calls from the AJAX JSON Web API from the... Consider this: my jQueryMobile page has approximately 5 dropdowns. We decided on using WebAPI (novice in this) for DB connection and wrote 5 respec...
CSS3 Recipes责编内容来自:CSS3 Recipes (源链) | 更多关于

阅读提示:酷辣虫无法对本内容的真实性提供任何保证,请自行验证并承担相关的风险与后果!
本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » Triggering CSS3 animation with JQuery hover not working



专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录