0

我有两个动画使用 JS 来激活一些 CSS 动画。似乎在 Chrome 和 Safari 中运行良好，但在 Moz 中运行良好。我还没有在 IE 中测试过（因为我在我的 MBP 上）但肯定那也很糟糕。不知道为什么。

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

2 回答 2

1

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

使用 CSS 属性和特定于供应商的属性（查看方式和浏览器支持）：https ://developer.mozilla.org/en-US/docs/CSS/animation

于 2013-05-03T17:01:00.780 回答
0

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

于 2013-05-03T16:43:56.307 回答