将b＆amp; w中的图像显示为颜色，就像它正在加载一样（从左到右）

Question

我不知道如何更清楚地解决问题的标题。

我有一个效果，它显示一个灰色的文本和css中的关键帧，字符变为黑色与animate css属性。

我想知道我怎么能用图像来表达这种效果，从b＆amp; w转换为从左到右的颜色。

这是代码：

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

CSS：

@-webkit-keyframes loading{
    from{max-width:0}
}

@-moz-keyframes loading{
    from{max-width:0}
}

@-o-keyframes loading{
    from{max-width:0}
}

@keyframes loading{
    from{max-width:0}
}

.modal {
background:#fff;
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
z-index:9999999;
}

.modal h1 {
position:absolute;
left:50%;
top:50%;
margin-top:-15px;
margin-left:-125px;
font-size:30px;
text-align:center;
color:rgba(0,0,0,.2);
}

.modal h1:before {
content:attr(data-content);
position:absolute;
overflow:hidden;
color:#000;
max-width:100%;
-webkit-animation:loading 5s;
-moz-animation:loading 5s;
-o-animation:loading 5s;
-ms-animation:loading 5s;
animation:loading 5s;
}

此处运行的代码：http://jsfiddle.net/5Vmnn/

谢谢

Answer 1

我会制作一个动画GIF，我认为这更容易。

制作5-10张不同数量的b＆amp; w和颜色的图像然后使用ImageMagick用这样的单行制作动画GIF：

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

对于单个循环，您可能需要loop=1，而在示例中我将其设置为零以进行无限循环。

View animated GIF here

如果您不熟悉Photoshop，我添加了色相饱和度图层并将饱和度调低至零，从而制作黑白图像。然后我按下了G用于渐变工具并在图像上绘制了一条水平线，以指定从B＆amp; W转换到颜色的位置，同时按住Shift键以确保它是水平的。然后将其保存为1.jpg并在不同的地方重新绘制渐变并将其再次保存为2.jpg等等。

Answer 2

也许你在考虑这样的事情？ Fiddle

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

编辑： Here是使用-webkit-filter（仍然是从右到左......）的灰度级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%;
}