在新的"页面加载"中Firefox中的Choppy和Jerky CSS3动画

Question

当我导航到我的一个子页面时,我试图将CSS3动画显示为加载器动画.我在rotateY上使用关键帧动画.问题是在Firefox上,当导航到另一个页面时,动画确实有效,但它非常生涩和波涛汹涌.

在Chrome和Safari上,同样的动画可以顺利完美地运行.

这是一个小提琴:http: //jsfiddle.net/p6mgxpbo/

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>

CSS:

.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);
        }
    }

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

需要一些有关如何解决此问题的见解.提前致谢 !!

PS:我在StackOverflow上做了很多与此相关的答案并尝试在Google上搜索,但无济于事.

Answer 1

遗憾的是,这是您无法通过浏览器修复,修改或控制的内容.你将不得不使用某种形式的黑客来使它工作或混淆系统做你想要的,但从正常的渲染,它将无法工作.

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

-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;

JSFiddle示例

这样做是让页面渲染,绘制和显示,然后在开始动画之前等待100毫秒(0.1秒).

如果这不起作用,则归结为FF不能像Chrome或其他浏览器一样干净地渲染动画,这只是一个浏览器问题而且非常难以绕过.

每个浏览器都有一个完全不同的树,渲染和绘制过程,用于向显示器显示HTML和CSS.Gecko(FF)和WebKit(Chrome)都使用完全不同的方法和流程来显示页面,遗憾的是,在制作动画时,Gecko在启动动画时有最微小的延迟,这就是为什么你会看到小点动画开始时的滞后/急动

Webkit流程

壁虎流

从上面的流程中可以看出,两个流程完全不同,DOM加载,渲染,绘制和显示的方式完全不同.

希望这有助于解决问题.

我已经添加了一条最好的信息,供您阅读有关浏览器渲染的内容.了解浏览器在前端工作时的工作方式总是很好.

• 现代浏览器如何工作