CSS @keyframesanimation闪烁
如何修复@-webkit-keyframesanimation闪烁在其迭代结束？
在使用CSS3 transform值translate ， translate3d和opacity进行animation处理的Android 2上，这一点非常明显。
您可能会注意到在一些post中的build议，以解决它：
-webkit-transform: translate3d(0,0,0);
要么
-webkit-perspective: 1000; -webkit-backface-visibility: hidden;
但是在Android 2.3上进行testing之后，我注意到他们中没有一个真正解决了这个问题。
乔治·赫斯（George Hess）在他的博客中发表了一个有效的解决方法，提到：
闪烁是由animation重置为刚开始的keframe仅一秒钟。 即使您已将animationCSS类保留为原来的样式并在完成animation时inheritance最后一个关键帧的样式，也会发生这种情况。 我能想出的唯一解决scheme是使用两个以上的关键帧。
例如，如果以下代码闪烁：
@-webkit-keyframes 'slide-in' { from { -webkit-transform: translateX(100%); } to { -webkit-transform: translateX(0); } }
将其更改为以下将解决该问题
@-webkit-keyframes 'slide-in' { from { -webkit-transform: translateX(100%); } 99% { -webkit-transform: translateX(0); } to {} /* equals `100% {}` Leave it empty to fix the flicker */ }
结论：将animation的持续时间结束为空（不要设置参数） to {} / 100% {}并且在animation参数的结束处设置99% {}或其他时间。
我不能得到@ Binyamin的解决scheme的工作，但设法解决这个问题，同时debugging另一个，只需join-webkit-animation-fill-mode: forwards;