html - 使用HTML/CSS，如何使用动画蒙版从一个图像过渡到另一个图像？

HTML页面中有两个图像。一个是黑白的，另一个是彩色的。我想使用自定义动画从黑白图像过渡到彩色图像。我要寻找的效果是图像显示为黑白，然后看起来像是逐笔画“涂”上了颜色。

我可以想到的最简单的方法是创建一个动画gif，该动画gif开头为白色，然后逐笔绘制为黑色。然后，我可以使用绝对定位将彩色图像放置在黑白图像的顶部，并用动画gif遮罩彩色图像。

但是，在追求这一点之前，我四处搜寻，看看是否有人做过类似的事情，而且我一直无法提出任何例子。甚至有可能，您可以举个例子吗？

还是有更好的方法来达到这种效果？

最佳答案

如果只有两个图像，则交叉淡化两个重叠图像非常简单

 @keyframes cf3FadeInOut {
  0% {
  opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}

#cf3 img.top {
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}

在此处观看演示3和4 http://css3.bradshawenterprises.com/cfimg/

关于html - 使用HTML/CSS，如何使用动画蒙版从一个图像过渡到另一个图像？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17001575/