css - 停止CSS动画后滚动页面时如何防止工件出现在Webkit中

Question

在某些情况下，我必须停止 CSS 关键帧动画。如果我之后滚动页面，我往往会在屏幕上收到伪影。它们出现在我停止动画之前停止的 div 所在的位置。有时我会得到这些工件从原始位置到先前动画 div 的新位置的“踪迹”。

在桌面版 Chrome 中，通常我只会看到一个工件(在工件上重绘会删除它)，但在 iOS Safari 中，我会看到它们的困惑轨迹。

我尝试使用不同的方法停止 CSS 动画，但我总是得到相同的结果。我向 div 添加了一个类，它定义了一个新位置(顶部/左侧，div 本身位于相对位置)，以及一个停止动画的属性，我试过:

1. 将动画持续时间设置为最短。
2. 将 -webkit-animation 设置为“无”
3. 使用 -webkit-animation-play-state 暂停动画

这些都没有修复工件。

Answer 1

将此添加到您调用动画的 css 中:

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

它强制硬件加速。