html - 平板电脑/手机中的 CSS3 动画怪异运动

Question

我为我正在处理的演示元素构建了一些带有关键帧的 CSS 动画。我只是使用 fadeIn、fadeOut、slideInLeft 和 slideOutLeft，它们在桌面模式下都按预期工作。

但是当我谈到平板电脑/移动版本时，slideInLeft 动画在动画结束时出现了意想不到的移动。类似缩放效果的东西。我已经为此烦恼了一段时间。预期的移动是一条从右到左的水平直线。

我的演示元素位于 this address 。在您单击第一个按钮并且第二个页面滑入后出现错误。如果您刷新页面，动画会按预期运行。

编辑

我的动画:

@keyframes slideInLeft {
    0% { left: 130%; }

    100% { left: 30%; }
}

@-webkit-keyframes slideInLeft {
    0% { left: 130%; }

    100% { left: 30%; }
}



@media (min-width: 768px) {
    @keyframes slideInLeft {
        0% { left: 130%; }

        100% { left: 0; }
    }

    @-webkit-keyframes slideInLeft {
        0% { left: 130%; }

        100% { left: 0; }
    }
}

@media (min-width: 992px) {
    @keyframes slideInLeft {
        0% { left: 130%; }

        100% { left: 10%; }
    }

    @-webkit-keyframes slideInLeft {
        0% { left: 130%; }

        100% { left: 10%; }
    }
}

@media (min-width: 1200px) {
    @keyframes slideInLeft {
        0% { left: 130%; }

        100% { left: 30%; }
    }

    @-webkit-keyframes slideInLeft {
        0% { left: 130%; }

        100% { left: 30%; }
    }
}

.slideInLeft {
    position: absolute !important;
    -webkit-animation: slideInLeft 2s;
    -moz-animation: slideInLeft 2s;
    -ms-animation: slideInLeft 2s;
    -o-animation: slideInLeft 2s;
    animation: slideInLeft 2s;
}

动画元素

.container {
position: absolute;
top: 100%;
left: 30%;
/*transform: translateX(-100%);*/
-webkit-transform: translateY(-60%);
-moz-transform: translateY(-60%);
-ms-transform: translateY(-60%);
-o-transform: translateY(-60%);
transform: translateY(-60%);
width: 40%;
display: block;
text-align: center;
margin: 0 auto;
}

HTML 结构

<div id="container" class="container slideInLeft">
    <div>
        <h1>
            Deactivation
        </h1>
    </div>
    <div>
        <p>
            Enter your activated phone number in international format (e.g. +467012345678)
        </p>
    </div>
    <div class="input-container">
        <input type="text" id="msisdn" />
    </div>
    <div id="loader" class="la-ball-scale-ripple-multiple la-2x spinner">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="dots has-input">
        <ul id="bullet-list">
            <li class="blank"></li>
            <li class="selected"></li>
            <li class="blank"></li>
            <li class="blank"></li>
        </ul>
    </div>
    <div class="button-container">
        <a href="#" class="button inactive" id="send-button">DEACTIVATE NUMBER</a>
    </div>

</div>

感谢任何帮助!

Answer 1

似乎在常规 css 和动画类中使容器“相对”可以为您完成这项工作:)

祝你好运!