title: AnimationEnd not working
body: <p>I am using <code>AnimationEnd</code> to trigger adding a new class. It works fine in Chrome but the other browsers are not responding. I am not sure why.</p>
  
  <p>JS</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function() {
          $('.background-image').on('webkitAnimationEnd mozAnimationEnd msAnimationEnd oAnimationEnd animationEnd', function() {
              $(this).addClass('visible');
          });
      });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>@-webkit-keyframes fade-in {
    0%   { opacity: 0; }
    100% { opacity: 1; }
  }
  @-moz-keyframes fade-in {
    0%   { opacity: 0; }
    100% { opacity: 1; }
  }
  @-ms-keyframes fade-in {
    0%   { opacity: 0; }
    100% { opacity: 1; }
  }
  @-o-keyframes fade-in {
    0%   { opacity: 0; }
    100% { opacity: 1; }
  }
  @keyframes fade-in {
    0%   { opacity: 0; }
    100% { opacity: 1; }
  }
  
  .background-image {
    background: url('images/bg.jpg') no-repeat center center fixed;
  
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  
    opacity: 0;
  
    -webkit-animation-name: fade-in;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-delay: 3s;
  
    -moz-animation-name: fade-in;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: ease-in;
    -moz-animation-iteration-count: 1;
    -moz-animation-delay: 3s;
  }
  
  .background-image.visible {
     opacity: 1;
  }
  </code></pre>