Question

我有两个动画使用JS来激活一些css动画。似乎在Chrome和Safari中工作得很好但不是Moz。我还没有在IE中测试过（因为我在我的MBP上）但是确定它也是borken。不知道为什么。

JS：

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

CSS：

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

    .background-image.visible {
      opacity: 1;
    }
#countries{
    width: 800px;
    height: 300px;
    position: absolute;
    background: rgb(0, 0, 0); /* Fall-back for browsers that don't support rgba */
    background: rgba(0, 0, 0, .9);
    left: 100px;
    top: 80px;
    border-radius: 10px; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 

     opacity: 0;

      -webkit-animation-name: fade-in;
      -webkit-animation-duration: .8s;
      -webkit-animation-timing-function: ease-in;
      -webkit-animation-iteration-count: .8;
      -webkit-animation-delay: 4.5s;
}
#countries.visible {
  opacity: 1;
}

Answer 1

问题是您只使用供应商特定的动画属性（webkit）。 Webkit是Chrome和Safari的浏览器引擎，这就是它的工作原理。

使用CSS属性和供应商特定的（请参阅如何和浏览器支持）：https://developer.mozilla.org/en-US/docs/CSS/animation

Answer 2

如果您从头到尾使用jQuery's Animate方法及其所有效果（是的，它甚至可以显示和隐藏项目），您将在浏览器中采用更健康的方法。 API页面上的示例。

JS淡入元素（Moz问题）

2 个答案: