title: jquery keyframes complete not firing
body: <p>I am using <a href="https://github.com/jQueryKeyframes/jQuery.Keyframes" rel="nofollow">this plugin</a> and for the most part it works. I have created this bit of code:</p>
  
  <pre><code>function spin() {
      var spinner = $(".spinner"),
          container = $(".spinner-container", spinner),
          items = $(".spinner-item", spinner);
  
      var itemWidth = items.first().outerWidth(true),
          containerWidth = items.length * itemWidth;
  
      container.css({
          width: containerWidth
      });
  
      $.keyframe.define({
          name: "slide",
          from: {
              "transform": "translate(0px)"
          },
          to: {
              "transform": "translate(-" + itemWidth + "px)"
          }
      });
  
      container.playKeyframe({
          name: "slide",
          duration: "5s",
          timingFunction: 'ease-in-out',
          repeat: 2,
          complete: function () {
              alert("complete");
  
              //var item = container.find(".spinner-item").first();
  
              //console.log(item);
  
              //item.parent().append(item);
          }
      });        
  };
  </code></pre>
  
  <p>The problem I have is with the <strong>complete</strong> callback function. It is just not firing.
  I have used this before and it worked, but I can't see what I am doing wrong...</p>
  
  <p>I have created a <a href="http://jsfiddle.net/s3tcg9fe/1/" rel="nofollow">jsfiddle for you to look at</a> :)</p>
  
  <p><strong>Update 1</strong></p>
  
  <p>It has been pointed out that the animation doesn't work in firefox. Please use chrome to view my fiddle. </p>