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

Apply animation in css3?

Apply animation in css3?

Problem

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')},
1300);

$(function(){
    $('#test').hover(function(){
            $('#test').addClass('animated bounce');

    });
});

Appreciate all the suggestions !

Problem courtesy of: Ray Hector

Solution

try this

$('#test').hover(function(){
    $(this).addClass('animated bounce');

}, function(){
    $(this).removeClass('animated-bounce');
});

or even better

  $('#test').hover(function(){
     $(this).addClass('animated-bounce');
  });

  var element = document.getElementById('test');
  element.addEventListener("webkitAnimationEnd", function(){
    $(element).removeClass('animated-bounce');
  }, false);

Actually.

Why don't use just do it with css

#test:hover{
   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

Discussion

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

×