挥舞旗帜影响 CSS3 性能问题

Question

我有一组框，每个框都有一个动画：

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(0); }
    100% { transform: scale(1); }
}

为了创建挥舞旗帜效果，我使用 animation-delay CSS 属性：

.pulsate1 {
    -webkit-animation-delay: 2s;
}
.pulsate2 {
    -webkit-animation-delay: 2.05s;
}
/* And so on up to pulsate20 */

这些pulsateN类环绕在每行框周围。

使用这种方法偶尔会闪烁，如本小提琴所示。有没有更好的解决方案？

Answer 1

闪烁的发生是因为 CSS 不知道如何处理 0 的缩放。将其更改为 0.001 等低值，享受流畅挥舞的旗帜:)

@keyframes pulse {
    0% { transform:  scale(1) translateZ(0); }
    50% { transform: scale(0.001) translateZ(0) }
    100% { transform: scale(1) translateZ(0) }
}

（如天际线所述，您可以添加translateZ(0)以利用GPU）

Answer 2

scale()是一种 2D 变换样式。尝试将 translateZ（0） 或 translate3d（0,0,0） 添加到动画中。这将诱使浏览器认为它正在进行 3D 转换，并将工作卸载到 GPU（如果可用）。我在Chrome 49上没有看到任何闪烁。

@keyframes pulse {
    0% { transform: scale(1) translateZ(0); }
    50% { transform: scale(0) translateZ(0); }
    100% { transform: scale(1) translateZ(0); }
}

以下是一篇解释 translate3d 性能优势的文章： https://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/