0

JSを使用してCSSアニメーションをアクティブにする2つのアニメーションがあります。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 に答える