animate.css: repeating animations

Question

I'm using animate.css for doing some animations. If an error occurs, the element should bounce:

$target.addClass('animated bounce');

That's working well. But if the user is doing the same thing, there won't be a second animation, as the classes are already added.

So I try to remove the classes after the animation like this:

$target.addClass('animated bounce');
setTimeout(function(){
    $target.removeClass('animated bounce');
}, 1000);

My question is, if this is how it should be done (I don't know how long the animation is exactly), or is there another solution for repeating animations?

Not sure I follow you 100%, but if using animate.css, to repeat animations, you can add the following CSS to force repeats: #yourElement { -vendor-animation-iteration-count: infinite; (use a number here if you you want to set a specif number of repeat animations) } Or, you can just set it like this if you want infinite repetitions: <div class="animated bounce infinite"></div> Where -vendor- is the vendor prefixes — Korgrue
– Korgrue, Commented Dec 7, 2015 at 20:06

Hakan Fıstık · Accepted Answer · 2017-03-31 15:17:30Z

4

You need to do this:

$('#target').removeClass().addClass('bounce animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
    $(this).removeClass();
});

$('#target') is in this case the ID of your element, change this to your needs.

edited Mar 31, 2017 at 15:17

Hakan Fıstık

19.9k16 gold badges124 silver badges152 bronze badges

answered Dec 7, 2015 at 20:21

Franco

2,3291 gold badge13 silver badges18 bronze badges

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

5 Comments

user3142695 Over a year ago

'one' should be 'on'? And 'oanimationend' -> 'onanimationend'?

Franco Over a year ago

No you just use it as it is in your error event. This small script will launch every time the error occurs. This is also advised by the maker of animate.css. You only need to change the target id.

user3142695 Over a year ago

Ok, but do I have to use one() as the classes will always be removed before they are added...?

Franco Over a year ago

Yes you must use .one(). This is a jquery event. whit this event you are actually calling the animate.css custom events. You don't need any Timeout().

Franco Over a year ago

@user3142695 If this is working for you please consider to up voting my answer

Hakan Fıstık · Accepted Answer · 2017-03-31 15:59:18Z

1

there is a shorter solution , you have to 'refresh' the animated element each time

function refreshElement(id){
   var el = $(id);
   el.before( el.clone(true) ).remove();
}

and that way you can run an animation on that element again

edited Mar 31, 2017 at 15:59

Hakan Fıstık

19.9k16 gold badges124 silver badges152 bronze badges

answered Dec 22, 2015 at 11:25

Mikail G.

4787 silver badges19 bronze badges

Comments

Jay Welsh · Accepted Answer · 2015-12-09 06:14:58Z

0

Run on mouse enter AND exit:

 $target.stop().toggleClass('animated bounce');

the animation class is added & removed based on the mouse's hover (enter/exit) action. The class will not be left active after exiting the item.

The .stop() will stop the animation from repeating multiple times if someone hovers/exits many times before an animation is complete.

edited Dec 9, 2015 at 6:14

answered Dec 7, 2015 at 20:34

Jay Welsh

4964 silver badges10 bronze badges

3 Comments

Phani Over a year ago

Can you please explain what fix does?

Jay Welsh Over a year ago

@Phani the animation class is added & removed based on the mouse's hover (enter/exit) action. The class will not be left active after exiting the item.

Phani Over a year ago

If you can add the same on answer, it will be much more clear. Thanks.

Collectives™ on Stack Overflow

animate.css: repeating animations

3 Answers 3

5 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related