Question

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

在Android 2上使用CSS3 transform值translate，translate3d和opacity制作动画非常明显。

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

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

或

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

但是在Android 2.3上进行测试之后，我注意到它们并非真正解决了这个问题。

Answer 1

George Hess在他的博客中发表了working fix，提到：

闪烁是由动画重置到开头引起的 keframe只是一瞬间。即使你有风格，也会发生这种情况动画CSS类保持原样并继承最后一个完成动画后的关键帧样式。唯一的解决方案我可以想出的是使用两个以上的关键帧。

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

@-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% {}的动画参数设置结束旁边留空（不要设置参数）或者是持续时间。

Answer 2

我无法获得@Binyamin的解决方案，但是在调试另一个问题时设法解决了这个问题，只需添加-webkit-animation-fill-mode: forwards;

CSS @keyframes动画闪烁

2 个答案: