Why CSS animation go smooth only if i am moving mouse pointer?

问题

Why, when i moving mouse pointer animation seems to be all-fluent, but if i am not, it is fluent partially (to the half of duration, precisely).

Example (with mouse moving):

Example without moving mouse:

It seems that it waits for end of the animation, and then the picture is showed.

The code which i am working on i present below:

         <div class="flip-container-off">
            <div class="flipper">
                <div class="front">
                    <div class="image">
                        <img id="login_image" src="{{ baseUrl }}public/images/login_page/login.png">
                    </div>
                    <img id="car1" src="{{ baseUrl }}public/images/login_page/car.png">
                    <img class="cloud-animation" src="{{ baseUrl }}public/images/login_page/cloud.png">
                </div>
                <div class="back">
                    <div class="image">
                        <img id="login_image" src="{{ baseUrl }}public/images/login_page/payment_required_logo.png">
                    </div>
                    <img class="cloud-animation" src="{{ baseUrl }}public/images/login_page/cloud.png">
                </div>
            </div>
        </div>

And the css for it:

    .flip-container-on .flipper, .flip-container-on .flipper {
        -webkit-transition-delay: 1.5s;
        transform: rotateY(180deg);
    }

    .flip-container-on, .front, .back {
        width: 320px;
    }

    /* flip speed goes here */
    .flipper {
        transition: 2s;
        transform-style: preserve-3d;

        position: relative;
    }

    /* hide back of pane during swap */
    .front, .back {
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility:    hidden;
        -ms-backface-visibility:     hidden;

        position: absolute;
        top: 0;
        left: 0;
    }

    /* front pane, placed above back */
    .front {
        z-index: 2;
        /* for firefox 31 */
        -webkit-transform:rotateY(0deg);
        -moz-transform:rotateY(0deg);
        -o-transform:rotateY(0deg);
        transform:rotateY(0deg);
    }

    /* back, initially hidden pane */
    .back {
        -webkit-transform:rotateY(180deg);
        -moz-transform:rotateY(180deg);
        -o-transform:rotateY(180deg);
        transform:rotateY(180deg);
    }

And a bit of JQuery:

$(function () {
    setTimeout(function () {
        $('.flip-container-off').addClass('flip-container-on');
        $('.flip-container-off').removeClass('flip-container-off');
    },1000);
});

Fiddle: https://jsfiddle.net/fk2xt8a9/

###################################

EDIT:

I have found the problem, I have got the cloud animation, and this animation interfere with flip animation in some way.

Example: Code for that cloud i present below:

@media (min-width: 820px) {
    .cloud-animation {
        display: initial;
        left: 52px;
        position: absolute;
        top: 101px;
        animation: animationFrames linear 90s;
        animation-iteration-count: infinite;
        transform-origin: 50% 50%;
        -webkit-animation: animationFrames linear 90s;
        -webkit-animation-iteration-count: infinite;
        -webkit-transform-origin: 50% 50%;
        -moz-animation: animationFrames linear 90s;
        -moz-animation-iteration-count: infinite;
        -moz-transform-origin: 50% 50%;
        -o-animation: animationFrames linear 90s;
        -o-animation-iteration-count: infinite;
        -o-transform-origin: 50% 50%;
        -ms-animation: animationFrames linear 90s;
        -ms-animation-iteration-count: infinite;
        -ms-transform-origin: 50% 50%;
        -webkit-transition-delay: 2s;
        transform: rotateY(180deg);
    }
}

@keyframes animationFrames {
    0% {
        transform: translate(0px, 0px);
    }
    50% {
        transform: translate(400px, 0px);
    }
    100% {
        transform: translate(0px, 0px);
    }
}

@-moz-keyframes animationFrames {
    0% {
        -moz-transform: translate(0px, 0px);
    }
    50% {
        -moz-transform: translate(400px, 0px);
    }
    100% {
        -moz-transform: translate(0px, 0px);
    }
}

@-webkit-keyframes animationFrames {
    0% {
        -webkit-transform: translate(0px, 0px);
    }
    50% {
        -webkit-transform: translate(400px, 0px);
    }
    100% {
        -webkit-transform: translate(0px, 0px);
    }
}

@-o-keyframes animationFrames {
    0% {
        -o-transform: translate(0px, 0px);
    }
    50% {
        -o-transform: translate(400px, 0px);
    }
    100% {
        -o-transform: translate(0px, 0px);
    }
}

@-ms-keyframes animationFrames {
    0% {
        -ms-transform: translate(0px, 0px);
    }
    50% {
        -ms-transform: translate(400px, 0px);
    }
    100% {
        -ms-transform: translate(0px, 0px);
    }
}

I don't have any idea why it is interfering, but is someone has some idea, i would appreciate it :)

Updated Fiddle: https://jsfiddle.net/fk2xt8a9/1/

(Please run that by run button, place cursor on the html editor and don't move please, because only then the problem occurs)

###################################

POSSIBLE WORKAROUND:

I have improved my code and solved my problem using Jquery:

• I put .cloud-animation-off instead of .cloud-animation class
• I made setTimeout inside previous setTimeout to exchange these classes to run my animation during flip animation
• that caused no interference in both animations :)

Preview:

Example fiddle: https://jsfiddle.net/fk2xt8a9/2/

来源：https://stackoverflow.com/questions/46588180/why-css-animation-go-smooth-only-if-i-am-moving-mouse-pointer