Question

我有以下代码在Chrome上正常运行但在Firefox上运行不正常。我想知道我的代码中是否出现了问题，因为这两个浏览器中的动画完全不同。与在Chrome上一样，动画很流畅，帧也很褪色。但是在Firefox上，一切似乎都很混乱，因为动画似乎被切断了。

#banner img {
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  -ms-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

@keyframes bannerFadeInOut {
  0% {
    opacity:1;
  }
  45% {
    opacity:1;
  }
  55% {
    opacity:0;
  }
  100% {
    opacity:0;
  }
}

@-moz-keyframes bannerFadeInOut {
  0% {
    opacity:1;
  }
  45% {
    opacity:1;
  }
  55% {
    opacity:0;
  }
  100% {
    opacity:0;
  }
}

@-webkit-keyframes bannerFadeInOut {
  0% {
    opacity:1;
  }
  45% {
    opacity:1;
  }
  55% {
    opacity:0;
  }
  100% {
    opacity:0;
  }
}

#top {
  -moz-animation-name: bannerFadeInOut;
  -moz-animation-duration: 8s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-direction: alternate;
  animation-name: bannerFadeInOut;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
}

HTML

<div id="banner">
    <img class="back" id="back" src="frames/frame_1.jpg"/>
    <img class="top" id="top" src="frames/frame_2.jpg"/>
    <img id="logo1" type="image/svg+xml" src="" />                                              
    <div class="border" id="border"></div>
    <img id="cta" src="frames/title.png"/>
</div>

我怎样才能在Firefox中使用CSS动画？

0 个答案: