有没有办法从左到右为图像的颜色设置动画？

Question

我正在尝试使用图像为加载图标设置动画。我想要实现的是让图像从左到右无限地在两种颜色之间进行动画处理。这是在 Angular 7 中完成的。我是动画新手，但据我所知，我可以用 CSS 动画解决这个问题。

我想要的是类似于下面的例子。只有我希望灰度向右消失，而不是灰度，我想选择两种不同的颜色。

感谢所有帮助！

body {
  margin: 0;
}

.effect {
  position: relative;
}

.effect-dup {
  filter: grayscale(100%);
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  width: 0;
  animation: width 1s ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes width {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

<div class="effect">
  <img src="https://placeimg.com/640/480/nature" />
  <div class='effect-dup'><img src="https://placeimg.com/640/480/nature" /></div>
</div>

<div class="effect">
  <img src="https://placeimg.com/640/480/tech" />
  <div class='effect-dup'>
    <img src="https://placeimg.com/640/480/tech" />
  </div>
</div>

Answer 1

你可以考虑一个额外的层和mix-blend-mode。只需调整着色和混合即可获得您想要的颜色。您将不再需要复制图像。

body {
  margin: 0;
}

img {
  width: 200px;
  display: block;
}

.effect {
  position: relative;
  display: inline-block;
  overflow:hidden;
}

.effect:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  animation: width 2s ease-in-out infinite;
  mix-blend-mode: color;
  background: linear-gradient(blue,red);
}

@keyframes width {
  from {
    transform:translateX(-100%);
  }
  to {
    transform:translateX(100%);
  }
}

<div class="effect">
  <img src="https://placeimg.com/640/480/nature" />
</div>

<div class="effect">
  <img src="https://placeimg.com/640/480/tech" />
</div>