android - CSS @keyframes 动画闪烁

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为此，提到:

The flicker is caused by the animation resetting to the beginning keframe for just a split second. This happens even if you have styled the animated CSS class to stay where it is and inherit the last keyframe’s styles upon completing the animation. The only solution I could come up with is to use more than 2 keyframes.

例如，如果下面的代码闪烁:

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

结论:留空(不设置参数)动画持续时间的结束到{}/100%{}和旁边在 99% {} 或其他持续时间内设置动画结束参数。