CODEWITHSUNDEEP
jqueryanimationcss
wailing_stone
wailing_stone

Reputation: 173

Triggering CSS3 animation with JQuery hover not working

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.

Upvotes: 0

Views: 133

Answers (2)

Alex Reynolds
Alex Reynolds

Reputation: 6352

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.

Upvotes: 0

Shmiddty
Shmiddty

Reputation: 13967

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/

Upvotes: 3

Related Questions