How to decrease the delay on starting CSS animations/transitions in Android WebView?

Question

I'm trying to use CSS3 animations in Android WebView but I'm getting a very annoying delay when starting the animation (roughly 500ms).

The animation runs smoothly, no lag, but it has the delay at start. Since there is no lag, I assume that's not a performance issue. Or it could be?

It's not the default 300ms onclick delay, I've already changed to ontouchstart and when I do anything else than animations/transitions, there is no delay. Only with these two.

It's not the animation-delay property as well, I've already set it to 0.

Any possible explanation/solution?

PS: The animation/transition I'm trying to run is with transform: translateX() property. Before, I was trying with left: Xpx, but it was lagging during the animation. With transform, there is no lag, but there is the delay.

Answer 1

I had the same problem and failed to find a reasonable solution. I've tried different approches and these are my conclusions:

• making animation longer makes it look more smooth, but doesn't reduce the delay at the beginning
• turning hardware acceleration OFF makes animation faster (delay is also reduced) but some frames are being dropped and animation isn't smooth anymore
• changing all translate3d to translateX/translateY/translateZ - no visual difference
• changing animation into multiple transitions controlled via JavaScript (transitionEnd event) makes it slower with multiple hiccups on the way (each time when transitionEnd is fired).

My guess is that CSS animations are just slow on Android and require some pre-computation to display them; hence the delay at the beginning. We'll probably need to wait for Chrome to became the default browser for Android.