Question

为什么，当我移动鼠标指针时，动画似乎非常流畅，但如果我不是，那么它会部分流畅（精确到持续时间的一半）。

示例（鼠标移动）：

不移动鼠标的示例：

似乎等待动画结束，然后显示图片。

我正在处理的代码如下：

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

和它的css：

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

还有一点JQuery：

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

小提琴： https://jsfiddle.net/fk2xt8a9/

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

修改

我发现了问题，我有云动画，这个动画会以某种方式干扰翻转动画。

实施例：我在下面介绍的云代码：

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

我不知道为什么会干扰，但有人有一些想法，我会很感激：）

更新小提琴： https://jsfiddle.net/fk2xt8a9/1/

（请通过运行按钮运行，将光标放在html编辑器上，请不要移动，因为只有这样才会出现问题）

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

可能的解决方法：

我使用Jquery改进了我的代码并解决了我的问题：

我把.cloud-animation-off而不是.cloud-animation class
我在之前的setTimeout中创建了setTimeout来交换这些类以在翻转动画期间运行我的动画
对两种动画都没有造成干扰：）

预览：

示例小提琴： https://jsfiddle.net/fk2xt8a9/2/

为什么CSS动画只有在我移动鼠标指针时才能流畅？

0 个答案: