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
+3
source to share
No one has answered this question yet
Check out similar questions: