Why would this div lag when animated on an Android Cordova app? Other elements animate fine in Android

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;

Why would a with the above css applied to it experience lag when animated? This is inside a Cordova app, the animation is extremely clean and smooth on iOS, but seriously lags in Android. Other elements in my app on Android are animating very smooth, its just this element. I'm hardware accelerating, using transforms etc... but just no luck. Here is the animation being used on the elements:

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

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