Android Cordova 应用程序上的 CSS 动画滞后

Question

position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
overflow: hidden;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-animation-delay: 0;
animation-delay: 0;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-webkit-transform-style: preserve-3d;
-webkit-perspective: 1000;

为什么 <div>应用上述 CSS 后，动画时会出现延迟吗？这是在 Cordova 应用程序中，动画在 iOS 上非常干净流畅，但在 Android 上严重滞后。我在 Android 上的应用程序中的其他元素动画非常流畅，只是这个元素。我正在硬件加速，使用变换等......但运气不好。这是在元素上使用的动画:

@keyframes slideInRight {
  from {
    z-index: 10;
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    z-index: 10;
    transform: translate3d(0, 0, 0);
  }
}

Answer 1

您是否使用 Crosswalk WebView Engine 进行了测试？

cordova-plugin-crosswalk-webview