0

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.

ajw-art
  • 173
  • 1
  • 1
  • 12
  • if you want further more: http://stackoverflow.com/questions/12062818/how-to-combine-jquery-animate-with-css3-properties-without-using-css-transitions – Barlas Apaydin Sep 06 '12 at 22:39

2 Answers2

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/

Shmiddty
  • 13,847
  • 1
  • 35
  • 52
  • 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. – Alex Reynolds Sep 06 '12 at 22:47
  • 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. – ajw-art Sep 06 '12 at 23:11
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.

Alex Reynolds
  • 6,264
  • 4
  • 26
  • 42