Javascript SVG的一致填充'；s矩形

如何使这些方块中的每个方块从左到右都充满红色；当其中一个填充红色时，前一个会有默认颜色吗

#foo>rect{
高度：32px；
宽度：32px；
}

---

使用CSS

关键帧

：

#foo>rect{
高度：32px；
宽度：32px；
动画：动漫3s无限；
}
#foo>rect:n类型（1）{
动画延迟：0s；
}
#foo>rect:n类型（2）{
动画延迟：1s；
}
#foo>rect:n类型（3）{
动画延迟：2s；
}
@关键帧动画{
0%{填充：黑色；}
50%{填充：红色；}
100%{填充：黑色；}
}

---

如果您对CSS解决方案持开放态度，您可以使用背景动画模拟这种效果，您可以轻松缩放到任意数量的正方形，但不会褪色：

.rect{
高度：32px；
宽度：计算（40px*10）；/*10平方米*/
背景：
/*此渐变将使红色从第一个渐变到最后一个渐变*/
线性梯度（红色，红色）0 0/32px 100%无重复，
/*此渐变将创建正方形（黑色为32px，透明为8px）*/
重复线性渐变（向右，黑色0 32px，透明32px 40px）；
利润率：0.5px；
动画：改变10s步数（10）无限；
}
@关键帧改变{
到{
背景位置：calc（100%+32px）0,0；
}
}

---

好的，但是如果我有100个方块呢？将主动画持续时间设置为100秒，并将第n个方块的动画延迟设置为n-1。或者您应该为此使用JS库。