Javascript JS淡入元素（Moz版）

我有两个使用JS激活css动画的动画。在Chrome和Safari中似乎运行良好，但在Moz中却不行。我还没有在IE上测试过（因为我在我的MBP上），但我确信这也是错误的。不知道为什么

JS:

---

如果您从头到尾使用该方法，并考虑其所有效果（是的，它甚至还具有显示和隐藏项目的功能），您将拥有一种跨浏览器的更健康的方法。API页面上的示例。

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

---

使用CSS属性和特定于供应商的属性（请参阅如何使用和浏览器支持）：

您的

-moz

前缀关键帧规则在哪里？能否共享

html代码片段

？您只能使用一个

$（文档）。准备好

并包装两个处理程序。谢谢，在其他关键帧规则上隔开，哈。但是知道如何在JS中添加“visible”类吗moz@Adrift因此，我将其他浏览器动画css添加到文件中（完全隔开），淡入可以工作，但JS没有添加Moz版本可见的类。我将它添加到JS

$（document）.ready（function（）{$（'.background image'）.on（'mozAnimationEnd'，function（e）{$（this.addClass（'visible'）；}）；}）

如果@Packy想要CSS3动画的好处，那么该插件允许您使用标准的jQuery

.animate（）

函数，并将动画转换为兼容的CSS3。因此，我将其他浏览器动画css添加到该文件中（完全隔开）淡入可以工作，但是JS没有添加Moz版本可见的类。我将其添加到JS$（document）.ready（function（）{$（'.background image'）.on（'mozAnimationEnd'，function（e）{$（this.addClass（'visible'）；}）；}）；

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

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