Loop and delay infinite CSS3 animation using jQuery

Question

I'm trying to add and remove classes on animated elements to create a stagger/delay effect so once the animation is completed, it adds an animation out class, then once that is completed it restarts the process.

I am using animate.css for the animations.

I have created a jsFiddle here: https://jsfiddle.net/3ozfgrh2/

As you can see it plays out the first 'loop' fine but then it removes/adds the classes too early/off.

var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
$('.sticker').on(animationEnd, function() {
    var $this = $(this);
    $this.removeClass('bounceIn').addClass('bounceOut').on(animationEnd, function() {
        setTimeout(function() {
            $this.removeClass('bounceOut').addClass('bounceIn');
        }, 1000);
    });
});

Any thoughts?

Answer 1

It looks like the code is not working as you expect because you are trying to attach 2 different behaviours to the same "onAnimationEnd" event.

You can avoid this confusion by "unhooking" any events from the animationEnd event with .off(). before attaching the new behaviour using .on().

I've split your code in to two separate functions so that you can set them up to continue firing continuously in a loop.

var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';

$('.sticker').on(animationEnd, addBounceOut);

function addBounceOut() {
    var $this = $(this);
    $this.removeClass('bounceIn').addClass('bounceOut').off(animationEnd).on(animationEnd, addBounceIn);
}

function addBounceIn() {
    var $this = $(this);
    setTimeout(function () {
        $this.removeClass('bounceOut').addClass('bounceIn').off(animationEnd).on(animationEnd, addBounceOut);
    }, 1000);
}

.sticker {
  display: inline-block;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  width: 12vw;
  height: 12vw;
  position: absolute;
  z-index: 1;
  animation-duration: 1s;
}

.sticker.one {
  background-color: orange;
  top: 7%;
  left: 15%;
  animation-delay: 1s;
}

.sticker.two {
  background-color: green;
  top: 14%;
  right: 11%;
  animation-delay: 2s;
}

.sticker.three {
  background-color: blue;
  top: 43%;
  right: 22%;
  animation-delay: 3s;
}

.sticker.four {
  background-color: red;
  top: 60%;
  left: 10%;
  animation-delay: 4s;
}

<link href="https://cdn.rawgit.com/daneden/animate.css/master/animate.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="sticker one animated bounceIn" href="#"></a>
<a class="sticker two animated bounceIn" href="#"></a>
<a class="sticker three animated bounceIn" href="#"></a>
<a class="sticker four animated bounceIn" href="#"></a>