1

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

transform在 Android 2 上使用 CSS3值进行动画处理非常明显translate，translate3d并且opacity.

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

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

或者

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

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

4

2 回答 2

3

George Hess 在他的博客中发布了一个有效的修复程序，提到：

闪烁是由动画重置到开始 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% {}或持续时间。

于 2012-07-11T09:27:55.620 回答
0

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

于 2014-05-09T13:55:12.947 回答