AnimationEnd не работает

Question

Я использую AnimationEnd, чтобы вызвать добавление нового класса. Он отлично работает в Chrome, но другие браузеры не реагируют. Я не знаю, почему.

JS

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.background-image').on('webkitAnimationEnd mozAnimationEnd msAnimationEnd oAnimationEnd animationEnd', function() { 
      $(this).addClass('visible'); 
     }); 
    }); 

</script> 

CSS

@-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; 
} 

Answer 1

Похоже, это было споткнуться mozAnimationEnd. Попробуйте это, я проверил это в Firefox:

jsFiddle

$(document).ready(function() { 
    $('.background-image').on('animationend webkitAnimationEnd oAnimationEnd', function() { 
     $(this).addClass('visible'); 
    }); 
});