Javascript 显示来自b&；的图像；w的颜色与加载时的颜色相同（从左到右）

我不知道如何把这个问题的标题弄清楚

我有一个效果，它显示了一个灰色的文本和css中的关键帧的字符变成黑色的动画css属性

我想知道我如何才能实现这种效果，但与图像，从黑白过渡到颜色从左到右

代码如下：

    <div class="modal">
        <h1 id="testid" data-content="THIS&nbsp;IS&nbsp;A&nbsp;TEST">THIS&nbsp;IS&nbsp;A&nbsp;TEST</h1>
    </div>

此处运行的代码：

---

谢谢

我会制作一个动画GIF，我想这要容易得多

制作5-10张图片，每张图片的黑白和颜色各不相同，然后使用ImageMagick制作一个动画GIF，其中一行如下：

convert -delay 20 -loop 0  *.jpg  animated.gif

对于单个循环，您可能需要

loop=1

，而在示例中，对于无限循环，我将其设置为零

---

如果您不熟悉Photoshop，我添加了一个色调饱和度层，并将饱和度调低到零，从而生成一个黑白图像。然后我按下梯度工具的

G

，并在图像上画一条水平线，以指定从黑白到彩色的过渡位置，同时按住Shift键以确保它是水平的。然后将其保存为1.jpg，并在另一个位置重新绘制渐变，然后再次将其保存为2.jpg，依此类推。

也许您正在考虑类似的事情？

它不是灰度，但它提供了类似的效果

编辑：这是一个使用

-Webkit过滤器的灰度Webkit版本（仍然是从右到左…）

我已将覆盖改为使用不透明度，但原理相同：

.modal {
 opacity: 0.8;
background:black;
z-index:9999999;
position: absolute;
left: 0;
top: 0;
max-width:0;
-webkit-animation:loading 5s;
-moz-animation:loading 5s;
-o-animation:loading 5s;
-ms-animation:loading 5s;
animation:loading 5s;
    width: 100%;
    height: 100%;
}

css动画核心仅为动画滑动一个值，如一种颜色到下一种颜色。它可以一次做很多对，但它不能将大小和颜色这两个不同的东西混合在一起，在制作动画时相互排斥。你可能可以在黑白图像上显示彩色副本，但你可能需要脚本，而不仅仅是css。你不能有两个DIV，每个DIV包含一个图像、一个b+w和一种颜色，并让颜色DIV的宽度像上面一样缓慢扩展吗？只需确保图像的全宽设置，但父div的宽度将被剪裁。如果您有两个版本的图像（一个是黑白，另一个是彩色），您可以实现此效果，否则（没有黑白版本），您可能必须对基于webkit的浏览器使用
过滤器
，对其他浏览器使用
svg
。漂亮的GIF。我喜欢你在专门从事黑白摄影的网站上主持这个节目很好，我想以你为例，我有一些事情要做。谢谢
.modal {
 opacity: 0.8;
background:black;
z-index:9999999;
position: absolute;
left: 0;
top: 0;
max-width:0;
-webkit-animation:loading 5s;
-moz-animation:loading 5s;
-o-animation:loading 5s;
-ms-animation:loading 5s;
animation:loading 5s;
    width: 100%;
    height: 100%;
}