动画结束事件不起作用

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

- Packy

Answer 1

看起来它在mozAnimationEnd上出现了故障。尝试这个，我已在Firefox中测试过：

jsFiddle

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

- apaul

---

另外，IE 10不使用MS前缀来表示CSS3。它们使用标准名称而没有前缀。提醒一下。 - Display Name is missing

@better_use_mkstemp 谢谢，我忘了这个，微软总是一个痛苦的事后想法... - apaul