CSS @keyframes动画闪烁

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

它是在Android 2上CSS3动画transform值translate，translate3d和opacity非常显着。

您可能会注意到在一些职位的建议与修复：

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

或

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

但测试它在Android 2.3之后，我发现比他们的非真正解决问题。

来源

2012-07-11 Binyamin

乔治·赫斯发表在自己的博客为它working fix，提的是：

闪烁由动画重置开始 keframe只是一瞬间造成的。即使您已将动画CSS类样式化为以保留它的位置，并在完成动画时继承关键帧的最后样式，也会发生这种情况。 I 可能提出的唯一解决方案是使用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% {}或者duratio ñ。

来源

2012-07-11 09:27:55 Binyamin

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

来源

2014-05-09 13:55:12 b4tch

CSS @keyframes动画闪烁

回答

相关问题