动画结束不起作用

我正在使用AnimationEnd来触发添加新类。 它在Chrome中运行良好，但其他浏览器没有响应。 我不知道为什么。

JS

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

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'); }); });