Question

我正在开发适用于Android的cordova应用。我有这个HTML <ul>：

<ul>
        <li class="animation" > 
                    ....
        </li>
</ul>

这是CSS：

@-webkit-keyframes list{
    from{
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        opacity: 0;
    }
    to{
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

.animation{
    -webkit-animation-name: list;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
     -webkit-animation-delay: 1s;

    animation-name: list;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-delay: 1s;
}

结果是列表的每个元素都会从左到右显示一点点褪色。

现在的问题是这个动画在我的HTC ONE上使用android 4.4.3真的很迟钝而且很慢。另一方面，当我使用Ripple Emulator在Chrome（在我的台式计算机上）上运行我的应用程序时，我注意到动画是完美而流畅的。

你知道我为什么会遇到这个问题以及如何解决这个问题吗？我还尝试仅使用translate并添加translateZ（0），但同样的问题。

由于

在Android Cordova应用程序中，CSS转换动画非常迟缓且速度慢

0 个答案: