CSS Keyframe Animation Flicker
Just for the record (since I couldn’t find any help on this issue), if you are animating a translateX, translateY, translate3d, or opacity CSS attribute by way of a webkit keyframe animation you may notice a flicker at the end of its iteration. It is very noticeable on Android 2. 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. Don’t ask me why, but it just works. 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 {}
}
It would probably be better to use “from”, “50%”, and “to” keyframes and assign them all a value. But if your transitions are easing in and/or out - a 50% value can make it look jerky.
I hope this post found you in time before you wasted hours like I did.
