有没有一种方法可以使图像的颜色从左到右动画变化？

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>

- kebbaben

---

将 filter: grayscale(100%) 更改为您想要的 filter... - Heretic Monkey

你可以使用CSS动画，也可以使用基于Angular的动画：https://angular.io/guide/animations。拥有多种选择总是很好的 :) - Askirkela

@HereticMonkey 感谢您的快速回复！假设我已经成功获取了我想要的滤镜。那我该如何在动画中在两个滤镜之间切换呢？ - kebbaben

它已经在无滤镜和有滤镜之间进行动画变化。因此，将一个滤镜添加到初始状态（.effect）中。 - Heretic Monkey

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>

- Temani Afif

---

我不确定这是否是 OP 寻找的内容，但它绝对看起来很棒。 - Alexander Nied

@kebbaben 将 alternate 添加到动画中：animation: width 5s ease-in-out infinte alternate; - Temani Afif

@TemaniAfif 那只会创建一个弹跳效果。我想要一个动画出现在左侧，然后从右侧消失，然后再次执行，就像一个循环。 - kebbaben

@kebbaben 我认为这是不可能的，但你可以将其作为一个单独的问题提出。避免同时问很多不同的问题，因为这会让其他人很难帮助，因为这个讨论被隐藏在评论部分。你可以将我的代码视为另一个问题的起点，我相信你会得到一些想法（我也会考虑）。 - Temani Afif

听起来很合理！接受为答案。 - kebbaben