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

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>