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

Posted 2023-03-06

【中文标题】animate.css 在 Firefox 和 chrome 中加载双倍时间

【英文标题】：animate.css is loading double time in firefox and chrome

【发布时间】：2016-07-07 22:14:32

【问题描述】：

您好，请在我的页面中帮助我解决这个问题，我使用了 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 中遇到同样的错误

【参考方案1】：

你已经设置了 2 次了。

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

【讨论】：

我也试过这个。又是同样的问题。我为我的 wordpress 网站添加了 facebook 插件。这会以任何方式影响动画吗？？

这个css和fb插件有什么关系？oo

我不知道删除插件后它工作正常。插件是OLARK。可能是因为这个它加载了两次？？

不确定，所以现在你是否使用我的建议？

是的，我按照您的建议删除了。问题依然存在。