Triggering CSS3 animation with JQuery hover not working

Question

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.

if you want further more: stackoverflow.com/questions/12062818/… — Barlas Apaydin
– Barlas Apaydin, Commented Sep 6, 2012 at 22:39

Shmiddty · Accepted Answer · 2012-09-06 22:36:13Z

3

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/

edited Sep 6, 2012 at 22:36

answered Sep 6, 2012 at 22:30

Shmiddty

13.9k1 gold badge38 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alex Reynolds Over a year ago

he's using someone elses css I think. The class Animated has those values in it. It just need to be put on the elem to animate.

wailing_stone Over a year ago

That did it! Thanks a lot. I'd assumed that the css sheet generated for me would have the timing already built into it. I've never used CSS3 animations before, so I didn't even think to check that.

Alex Reynolds · Accepted Answer · 2012-09-06 22:50:16Z

0

You need to add the animated class. Here's the updated fiddle http://jsfiddle.net/fyTpV/3/ add the class to the elem you wish to animate or in your add class add the animated class as well.

edited Sep 6, 2012 at 22:50

answered Sep 6, 2012 at 22:38

Alex Reynolds

6,3524 gold badges30 silver badges43 bronze badges

Collectives™ on Stack Overflow

Triggering CSS3 animation with JQuery hover not working

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related