Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Apply animation in css3?

Apply animation in css3?


I just came across animate.css yesterday and wanted to apply it to my website. But the problem was it only worked once, no matter how many times I hovered over the div it stays the same! Maybe I didn't quite grasp the coding technique properly. Here is my code:

    window.setTimeout( function(){
   $('#test').removeClass('animated bounce')},

            $('#test').addClass('animated bounce');


Appreciate all the suggestions !

Problem courtesy of: Ray Hector


try this

    $(this).addClass('animated bounce');

}, function(){

or even better


  var element = document.getElementById('test');
  element.addEventListener("webkitAnimationEnd", function(){
  }, false);


Why don't use just do it with css

   animation: animateName ....;

The problem your having is that when you add the class the Animation works but when you hover a second time it doesn't add the class again because it is already there so CSS doesn't know when you have hovered it without a change in class name.

Link to Animation Event DOCS

AnimationEnd Demo

CSS :hover Demo

Solution courtesy of: iConnor


View additional discussion.

This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Apply animation in css3?


Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription