Choppy and Jerky CSS3 animation in Firefox on new "page load"

Question

I am trying to show a CSS3 animation as a loader-animation when I navigate to one of my subpages. I am using keyframe animation on rotateY. The issue is that on Firefox, while navigation to another page, the animation does work, but its very jerky and choppy.

While on Chrome and Safari, the same animation works smoothly and perfectly.

Here is a fiddle: 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);
        }
    }

The jerk only comes when Its there on a page which is loading other resources. I am trying to use this element as a pre-loading animation. So it's on the page until the rest of the page is loading. I also have google maps on the same page. So, while the browser is downloading other resources, till that time the animation jerks. You'll not be able to see the jerk on the fiddle.

Need some insights on how to fix this. Thanks in advance !!

P.S: I did go through a lot of answers related to this on StackOverflow and tried searching on Google, but to no avail.

Answer 1

Sadly, this is something that you will not be able to fix, amend or control with browsers. You will have to use some form of hack to get it to work or confuse the system into doing what you want, but from a normal render, it won't work.

---

What you could possibly do is add a delay to the animation.

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

What this will do is let the page render, paint and display, then it will wait for 100ms (0.1s) before starting the animation.

If this doesn't work, then it's down to FF not rendering animations as cleanly as Chrome or some other browsers and that is simply a browser issue and will be exceedingly difficult to get round.

---

Every browser has a completely different tree, render and paint process for displaying HTML & CSS to your monitor. Gecko (FF) and WebKit (Chrome) both use completely different methods and processes to display the page and sadly, when it comes to doing animations, Gecko has the tiniest amount of lag when starting up the animation which is why you see the small bit of lag/jerkiness when the animation begins.

Webkit flow

Gecko flow

As you can see from the above flows, both flows are completely different and the way that the DOM is loaded in, rendered, painted and then displayed is completely different.

Hope this help clears up the issue.

I've added one of the best pieces of information for you to read up on about browser rendering. It's always good to have an understanding of how browsers work when working on the front-end.

• How modern browsers work