CSS @keyframe动画闪烁

Question

如何修复@-webkit-keyframes动画在迭代结束时的闪烁？

在Android2上使用CSS3 transform values translate，translate3d和opacity的动画效果非常明显。

你可能会在一些帖子中注意到修复它的建议：

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

或

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

但在Android 2.3上测试后，我注意到没有一个真正解决了这个问题。

Answer 1

乔治·赫斯在他的博客中发表了一篇working fix，提到：

闪烁是由于动画仅在瞬间重置到开始关键帧而导致的。即使您已将动画CSS类的样式设置为停留在原处并在完成动画后继承最后一个关键帧的样式，也会发生这种情况。我能想到的唯一解决方案就是使用2个以上的关键帧。

例如，如果以下代码闪烁：

@-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 */
}

结论：将动画持续时间to {}/100% {}的结尾留空(不要将参数设置为)，并在99% {}或else duration中设置动画参数的结尾。

Answer 2

我不能让@Binyamin的解决方案工作，但在调试另一个解决方案时设法解决了这个问题，只需添加-webkit-animation-fill-mode: forwards;