Firefox上新出现的乱七八糟的CSS3动画；“页面加载”；

当我导航到其中一个子页面时，我试图将CSS3动画显示为加载程序动画。 我正在rotateY上使用关键帧动画。 问题是，在Firefox上，当导航到另一个页面时，动画确实可以工作，但它非常不稳定和不稳定

在Chrome和Safari上，同样的动画可以流畅完美地工作

这是一把小提琴：

HTML:

<div class="gb-loading">
    <div id="animatedElem" class="pin-c">
        <div class='pin'></div>    
    </div>
    <div class="pin-mirror"></div>
    <div id="gb-lb" class="load-bounce"></div>
</div>

.gb-loading {
        position: fixed;
        left: 0;
        right: 0;
        top: 50%;
        bottom: 0;
        width: 70px;
        height: 70px;
        margin: auto;
        z-index: 101;
        margin-top: -100px;
    }
    .pin-c {
        width: 70px;
        height: 70px;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 11;

        -webkit-animation: pulsate 1.5s linear infinite;
           -moz-animation: pulsate 1.5s linear infinite;
             -o-animation: pulsate 1.5s linear infinite;
                animation: pulsate 1.5s linear infinite;
    }
    .pin {
        width: 70px;
        height: 70px;
        background-color: #34baab;
        position: absolute;
        left: 0;
        top: 0;

      -webkit-border-radius: 50% 50% 50% 0;
              border-radius: 50% 50% 50% 0;

      -webkit-transform: rotate(-45deg);
         -moz-transform: rotate(-45deg);
           -o-transform: rotate(-45deg);
              transform: rotate(-45deg);
    }

    .pin-mirror {
        width: 70px;
        height: 70px;
        background-color: #003146;
        position: absolute;
        left: 0;
        bottom: -48px;
        z-index: -1;

      -webkit-border-radius: 50% 0 50% 50%;
              border-radius: 50% 0 50% 50%;

      -webkit-transform: rotate(-45deg);
         -moz-transform: rotate(-45deg);
           -o-transform: rotate(-45deg);
              transform: rotate(-45deg);
    }

    .pin:after {
        content: '';
        width: 25px;
        height: 25px;
        margin: 22px 0 0 22px;
        background-color: #003146;
        position: absolute;

        -webkit-border-radius: 50%;
                border-radius: 50%;
    }

    .load-bounce {
        width: 25px;
        height: 25px;
        position: absolute;

        left: 65px;
        background-color: #003146;
        -webkit-transform: translateZ(0.5);
           -moz-transform: translateZ(0.5);
                transform: translateZ(0.5);

        -webkit-border-radius: 50%;
                border-radius: 50%;

        -webkit-animation: bounce .5s linear infinite alternate;
           -moz-animation: bounce .5s linear infinite alternate;
             -o-animation: bounce .5s linear infinite alternate;
                animation: bounce .5s linear infinite alternate;
    }

    @-webkit-keyframes pulsate {
        0% {

            -webkit-transform: rotateY(0deg);
        }          
        100% {

            -webkit-transform: rotateY(360deg);
        }
    }

    @-moz-keyframes pulsate {
        0% {

            -moz-transform: rotateY(0deg);
        }
        100% {

            -moz-transform: rotateY(360deg);
        }
    }

    @keyframes pulsate {
        0% {

            transform: rotateY(0deg);
        }
        100% {

            transform: rotateY(360deg);
        }
    }

    @-webkit-keyframes bounce {
        0% {
            -webkit-transform: translateY(-10px);

        }
        100% {
            -webkit-transform: translateY(-40px);
        }
    }
    @keyframes bounce {
        0% {
            transform: translateY(-10px);

        }
        100% {
            transform: translateY(-40px);
        }
    }

    @-moz-keyframes bounce {
        0% {
            -moz-transform: translateY(-10px);

        }
        100% {
            -moz-transform: translateY(-40px);
        }
    }

只有当它出现在正在加载其他资源的页面上时，这种冲动才会出现。我试图使用这个元素作为预加载动画。所以它一直在页面上，直到页面的其余部分被加载。我在同一页上也有谷歌地图。因此，当浏览器正在下载其他资源时，直到那时动画才停止。你将看不到小提琴上的那个混蛋

需要一些关于如何解决这个问题的见解。 提前谢谢

---

注：我在StackOverflow上查看了很多与此相关的答案，并尝试在Google上搜索，但没有结果。

遗憾的是，这是一个你将无法用浏览器修复、修改或控制的问题。您将不得不使用某种形式的黑客使其工作或混淆系统，使其执行您想要的操作，但从正常渲染来看，它将无法工作

---

您可能要做的是为动画添加延迟

-webkit-animation: pulsate 0.8s linear 10ms infinite;
-moz-animation: pulsate 0.8s linear 10ms infinite;
-o-animation: pulsate 0.8s linear 10ms infinite;
animation: pulsate 0.8s linear 10ms infinite;

这样做的目的是让页面渲染、绘制和显示，然后等待100毫秒（0.1秒），然后再开始动画

如果这不起作用，那就是FF没有像Chrome或其他浏览器那样清晰地渲染动画，这只是一个浏览器问题，很难解决

---

每个浏览器都有一个完全不同的树、渲染和绘制过程，用于向监视器显示HTML和CSS。Gecko（FF）和WebKit（Chrome）都使用完全不同的方法和过程来显示页面，不幸的是，当涉及到制作动画时，Gecko在启动动画时的延迟量最小，这就是为什么在动画开始时会看到一点点延迟/抖动

网络工具包流量

壁虎流

从上面的流可以看出，这两个流完全不同，加载、渲染、绘制和显示DOM的方式也完全不同

希望这有助于解决问题

我为您添加了一条关于浏览器渲染的最佳信息，供您阅读。在前端工作时，了解浏览器的工作方式总是很好的

---

我正在使用带有长方体阴影的关键帧来创建动画。然后，我使用animation命令选择关键帧名称并定义动画的一些细节（持续时间、延迟等）

我不会发布我的关键帧，因为它很长。然而，即使我的动画持续时间只有1秒，我也遇到了延迟。 我尝试了所有的方法来修复滞后，我添加了线性、易入易出等。。将各种标记添加到动画命令，但未成功

最后，我只是

停用附加组件

---

（因为附加组件也会降低firefox的性能，尤其是阻止附加组件的附加组件）。停用所有附加组件后，它工作正常。

您能分享您的代码吗？在没有看到它的情况下调试它接近。。。不可能？您需要在问题本身中包含代码。否则它可能会关闭。在这里工作非常顺利。我也是，我在FF和chrome中尝试过它，没有任何问题。@ShubhamSharma:问题是我们无法帮助解决我们看不到的问题。因此，如果你不能在小提琴上重现这种行为，那么答案就很难找到。

#myanimation{
  animation: x 1s 1 ease-out ;
  -webkit-animation: x 1s 1 ;
  -webkit-backface-visibility: hidden;
  -moz-animation: x 1s 1;
  -o-animation: x 1s 1 ;
}