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类围绕着每一行框。

使用此方法偶尔会出现一些闪烁，如fiddle所示。还有其他更好的解决方案吗？

Answer 1

@keyframes pulse { 0% { transform: scale(1) translateZ(0); } 50% { transform: scale(0) translateZ(0); } 100% { transform: scale(1) translateZ(0); } }是一种2D转换风格。尝试将translateZ（0）或translate3d（0,0,0）添加到动画中。这将欺骗浏览器认为它正在进行3D转换，并将工作卸载到GPU（如果可用）。我没有在Chrome 49上看到任何闪烁。

maxConnections

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

Answer 2

闪烁的发生是因为CSS不知道如何处理0的比例。将其改为0.001以下的低点并享受smoothly-waving flag：）

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

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

挥舞旗帜效果CSS3性能问题

2 个答案: