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

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

我想要的是与下面的例子类似的东西。我只想让灰度消失在右边，而不是灰度，我想选择两种不同的颜色

感谢您的帮助

身体{ 保证金：0； } .效果{ 位置：相对位置； } .效果dup{ 过滤器：灰度100%； 位置：绝对位置； 溢出：隐藏； 排名：0； 左：0； 宽度：0； 动画：宽度为1s，易于输入输出； 动画填充模式：正向； } @关键帧宽度{ 从{ 宽度：0； } 到{ 宽度：100%； } }

---

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

身体{ 保证金：0； } img{ 宽度：200px； 显示：块； } .效果{ 位置：相对位置； 显示：内联块； 溢出：隐藏； } .效果：之前{ 内容：； 位置：绝对位置； 排名：0； 左：0； 底部：0； 右：0； 动画：宽度2秒，输入输出无限； 混合模式：颜色； 背景：线性渐变蓝色、红色； } @关键帧宽度{ 从{ 转化：translateX-100%； } 到{ 转化：转化率100%； } }

---

将过滤器：灰度100%更改为您想要的…您可以使用CSS动画，也可以使用基于角度的动画：。有选择总是很好：@HereticMonkey谢谢你的快速回复！假设我已经设法得到了我想要的过滤器。然后如何在动画中的两个过滤器之间进行更改？它已经在为无过滤器和过滤器之间的更改设置动画。因此，在初始状态中添加一个过滤器。效果。我不确定这是否是OP想要的，但除了@Temani answer，它肯定看起来很棒。要无限期运行，可以使用“动画迭代计数：无限；”cssproperty@TemaniAfif我尝试了你的解决方案，加入了眼镜蛇，但是我得到了一个跳跃动画。我想过滤器消失在一边，出现在另一边。这可行吗？@kebbaben为动画添加替换：动画：宽度5s缓进缓出内隐替换@Temaniaf，如果这只会产生反弹效果。我想要一个动画出现在左边，消失在右边，然后再做一次，就像一个循环。