loop of CSS3 animations triggered by jquery breaking after so many iterations

Question

So, I'm working on a project for work and have delved into the world of CSS3 keyframe animations.

I have successfully animated a small scene that loops on the page. The animation is fine but around iteration 6 it starts to get bumpy and then stops working altogether. My animations are chained together by waiting for the animationEnd callback then triggering the next animation, this isn't working somewhere down the line.

I need this to keep looping for infinity and beyond.

The scene goes as thus (so you know what's going on):

1. Car drives in from right
2. Door opens
3. 3 Boxes come out one after another
4. Door closes
5. Car drives away
6. Boxes fade
7. Back to 1.

Here is an obligatory jsfiddle (Has latest fix attempt) with my scene playing out (I have replaced the images with block colours but you can see the idea)

This is my HTML & JS, there is too much CSS to include on this page.

HTML:

  <div class="scene">
    <div class="origin">
      <div class="bus bus-first-move">
        <div class="shaker shake-little">
          <div class="bus-body"></div>
          <div class="bus-door"></div>
        </div>
      </div>
        <div class="box box-1"></div>
        <div class="box box-2"></div>
        <div class="box box-3"></div>
    </div>
  </div>

(ORIGINAL) JS:

$(document).ready(function() {    

    animation();    

});    

function animation() {
// console.log('Animation Start >>>>');
var bus       = $('.bus'),
    shaker    = $('.bus .shaker'),
    busDoor   = $('.bus-door'),
    boxes     = $('.box'),
    box1      = $('.box-1'),
    box2      = $('.box-2'),
    box3      = $('.box-3');    


  bus.addClass('bus-first-move');
  // console.log('Bus first move');
  bus.one('webkitAnimationEnd oanimationend msAnimationEnd animationend',   
    function(e) {    

      busDoor.addClass('bus-door-open');
      // console.log('Open bus Door');
      busDoor.one('webkitAnimationEnd oanimationend msAnimationEnd animationend',   
        function(e) {
          box1.show().addClass('box-1-throw');
          // console.log('Box 1 throw');
          box1.one('webkitAnimationEnd oanimationend msAnimationEnd animationend',   
            function(e) {
              box2.show().addClass('box-2-throw');
              // console.log('Box 2 throw');
              box2.one('webkitAnimationEnd oanimationend msAnimationEnd animationend',   
                function(e) {
                  box3.show().addClass('box-3-throw');
                  // console.log('Box 3 throw');
                  box3.one('webkitAnimationEnd oanimationend msAnimationEnd animationend',   
                    function(e) {
                      busDoor.removeClass('bus-door-open').addClass('bus-door-close');
                      // console.log('Close bus door');
                      busDoor.one('webkitAnimationEnd oanimationend msAnimationEnd animationend',   
                        function(e) {    

                          bus.removeClass('bus-first-move').delay(200).addClass('bus-drive-away');
                          // console.log('Bus drive away');    

                          bus.one('webkitAnimationEnd oanimationend msAnimationEnd animationend',   
                            function(e) {
                              busDoor.removeClass('bus-door-close');
                              // console.log('8s until box fade');
                              setTimeout(function()
                              {
                                box1.fadeOut(1000);
                                box2.fadeOut(1000);
                                box3.fadeOut(1000);
                                // console.log('2s until Animation restart');
                                setTimeout(function()
                                {
                                  box1.removeClass('box-1-throw');
                                  box2.removeClass('box-2-throw');
                                  box3.removeClass('box-3-throw');
                                  bus.removeClass('bus-drive-away');
                                  // console.log('Animation Finished <<<<<<');    

                                animation();    

                                }, 2000);
                              }, 8000);
                            });
                        });
                    });
                });
            });
        });
    });
}

EDIT: I think it's something to do with the 'SetTimeout's I'm using to delay some of the actions, I can't be sure though. The console just starts getting so mixed up.

EDIT 2: Looked at console logs from both Firefox and Chrome. Firefox pulls off the execution perfectly and never meets a hitch. Chrome on the other hand starts messing up before the first iteration has even finished, any advice I can get on this is greatly appreciated.

Edit 3: Still cannot figure out why this is happening.