CSS @keyframes 动画闪烁答案

【问题标题】：CSS @keyframes animation flickerCSS @keyframes 动画闪烁
【发布时间】：2012-07-10 21:20:40
【问题描述】：

如何解决@-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 上对其进行测试后，我注意到其中没有一个真正解决了这个问题。

【问题讨论】：

标签： android ios css

【解决方案1】：

George Hess 在他的博客中为此发布了 working fix，并提到：

闪烁是动画重置到开头引起的 keframe 只是一瞬间。即使您设置了样式，也会发生这种情况动画 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% {}或持续时间旁边设置动画参数的结束。 p>

【讨论】：

【解决方案2】：

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

【讨论】：