CSS animation is very slow and slow in Android Cordova app

I am shooting a cordova android app. I have this HTML <ul>

:

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

      

        
        
        
      

    

and this is the 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;
}

      

        
        
        
      

    

the result is that each list item will display from left to right with a little fading.

Now the problem is that this animation is very slow and slow on my HTC ONE with Android 4.4.3. On the other hand, I notice that the animation is beautiful and smooth when I run my app in Chrome (on my desktop) using the Ripple Emulator.

Do you have any idea why I have this problem and how to fix it? I also tried to use only translate

and add translateZ (0) but same problem.

thank