css - 飘扬的旗帜效果 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 类环绕着每一行框。

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

Answer 1

闪烁的发生是因为 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) }
}

(如 skyline 所述，您可以添加 translateZ(0) 以利用 GPU)