animate.css 在 Firefox 和 chrome 中加载双倍时间

Question

您好，请在我的页面中帮助我解决这个问题，我使用了 animate.css 文件中的fadeInUp css。当我在 Firefox 中打开时，它正在加载两倍。

这是我用的css。

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
     transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
     transform: none;
  }
}

@-moz-keyframes fadeInUp {
  from {
    opacity: 0;

    -moz-transform: translate3d(0, 100%, 0);
     transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -moz-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    -o-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    -moz-transform: none;
     -ms-transform: none;
    -o-transform: none;
    transform: none;
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  -moz-animation-name: fadeInUp;
  -ms-animation-name: fadeInUp;
  -o-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

有时我也会在 chrome 中遇到同样的错误

Answer 1

你已经设置了 2 次了。

只要@keyframes fadeInUp 中的代码支持所有浏览器，您不需要： @-moz-keyframes fadeInUp {...} 和 @-webkit-keyframes fadeInUp {...}