动画css渐变数组

Question

我有一个父div用屏幕宽度设置高度。我想在其中制作相同长度的小盒子。我想＆＃39;滑动＆＃39;父div的单个渐变的较小框的颜色。这是我实现它的一种方式，每个框都是一个宽度可变的div：

移动显示有问题所以我需要一个新的解决方案。 我知道可以使用背景位置制作动画渐变，但是一次动画渐变的部分会怎么样。

这个版本的最终版本将包括这个div中的大约100个小盒子。我正在寻找建议，所以如果这对画布更有意义，请告诉我。

Answer 1

您可以将每个框作为单个渐变，然后为该渐变的background-size设置动画。但是，我不建议这样做。动画100个渐变必然会对性能造成不利影响。正如动画100个元素的width一样（为每个scale()设置div变换的动画效果会更好。）

如果canvas是一个选项，那么使用canvas，在这种情况下，从可维护性和性能角度来看，这是一个更好的选择。

Answer 2

如果框长度相等，您可以使用以下步骤为主背景设置动画:(将鼠标悬停在div上）

.test {
  width: 600px;
  height: 50px;
  background-image: linear-gradient(90deg, yellow 50%, green 50%);
  background-size: 200% 100%;
  background-position: 0% 0;
  transition: background-position 40s steps(100);
}
.test:hover {
  background-position: -100% 0;
}

<div class="test"></div>