小编Shu*_*rma的帖子

当我导航到我的一个子页面时,我试图将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;
    } …