Question

How to fix @-webkit-keyframes animation flicker at the end of its iteration?

It is very noticeable on Android 2 on animating with CSS3 transform values translate, translate3d and opacity.

You might notice in some posts a suggestions to fix it with:

-webkit-transform: translate3d(0,0,0);

or

-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;

But after testing it on Android 2.3, I noticed than non of them really fixes the issue.

Answer 1

George Hess published in his blog a working fix for it, mentioning:

The flicker is caused by the animation resetting to the beginning
keframe for just a split second. This happens even if you have styled
the animated CSS class to stay where it is and inherit the last
keyframe’s styles upon completing the animation. The only solution I
could come up with is to use more than 2 keyframes.

For example, if the following code flickers:

@-webkit-keyframes 'slide-in' {
    from { -webkit-transform: translateX(100%); }
    to { -webkit-transform: translateX(0); }
}

changing it to the following will fix the problem

@-webkit-keyframes 'slide-in' {
    from { -webkit-transform: translateX(100%); }
    99% { -webkit-transform: translateX(0); }
    to {} /* equals `100% {}` Leave it empty to fix the flicker */
}

Conclusion: Leave empty (do not set parameters to) the end of animation duration to {}/100% {} and beside set end of animation parameters in 99% {} or else duration.