Mark Wilson Mark Wilson - 1 year ago 87
CSS Question

Detect being animated and end of animation state for animate.css with jQuery

I am using animate.css to animate few blocks on my web page.

<a href="#" class="clicktoanimate">Click to animate</a>
<div class="div-to-animate">
some content...

$('.div-to-animate').addClass('animated fadeIn');

So that does the animation.

But now I want to do some tasks when it is being animated and when the animation is done.

So, to check if it is being animated, I used the following condition

if ($('.div-to-animate').hasClass('animated')) {
// do something

which does fine but not for all cases. Because the animated class is not being removed after the transition.

So, I guess the only piece of puzzle I need to solve now is: How to remove the animated class after the animation is completed.

Answer Source

You can listen for the animationend event and remove the class when it fires:

$(".div-to-animate").on("animationend", function() {


$(".div-to-animate").on("animationend", function() {
}).addClass("animated fadeIn");
.animated {
  color: green;
<link href="" rel="stylesheet"/>
<div class="div-to-animate">This is the div, it's green while being animated</div>
<script src=""></script>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download